使用jQuery和自举造型复选框按钮 [英] Styling Checkbox Buttons using jQuery and Boostrap
本文介绍了使用jQuery和自举造型复选框按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用asp.net的表单，试图让我的复选框看起来像这样：
http://bootsnipp.com/snippets/featured/jquery-checkbox-buttons
我想从上面的链接到我的网页复制HTML和js code，但它不工作，可能是缺少CSS和这样的...
什么我需要添加到我的页面有相应的复选框看起来像上面的图片，能有人给一个完整的例子（包括HTML，CSS和脚本）？
这是从上面的链接code：它甚至工作在这里：的http：// jsfiddle.net/DcYhf/65/
但我把它复制到我的网页它不工作了...
HTML
＆LT;跨度类=按钮，勾选＆GT;
＆LT;按钮式=按钮级=BTN BTN-LG数据色=主＆GT;小学及LT; /按钮＆GT;
＆LT;输入类型=复选框级=隐藏检查/＆GT;
＆LT; / SPAN＆GT;
JS
$（函数（）{
$（'按钮，复选框）。每个（函数（）{ //设置
变量$部件= $（本），
$按钮= $ widget.find（按钮），
$复选框= $ widget.find（'输入：复选框），
颜色= $ button.data（颜色），
设置= {
上： {
图标：glyphicon glyphicon检查
}，
关：{
图标：glyphicon glyphicon，选中
}
}; //事件处理程序
$ button.on（'点击'，功能（）{
$ checkbox.prop：（'检查'，$ checkbox.is（'检查'）！）
$ checkbox.triggerHandler（'变'）;
updateDisplay（）;
}）;
$ checkbox.on（'变'，函数（）{
updateDisplay（）;
}）; //操作
功能updateDisplay（）{
VAR =器isChecked $ checkbox.is（'：检查'）; //设置按钮的状态
$ button.data（国家，（关于器isChecked）：关）; //设置按钮的图标
$ button.find（'状态图标）
.removeClass（）
.addClass（状态图标+设置[$ button.data（'状态'）]图标。）; //更新按钮的颜色
如果（器isChecked）{
$按钮
.removeClass（'BTN-默认）
.addClass（'btn-'+颜色+'积极'）;
}
其他{
$按钮
.removeClass（'btn-'+颜色+激活）
.addClass（'BTN-默认'）;
}
} //初始化
功能的init（）{ updateDisplay（）; //如果注入的应用图标
如果（$ button.find（'状态图标）。长度== 0）{
。$按钮prePEND（'＆LT; I类=状态图标。+设置[$ button.data（'状态'）]图标+'＆GT;＆LT; / I＆GT;'）;
}
}
在里面（）;
}）;
}）;
这是我现在：
解决方案
我觉得这是一个工作的例子：
\r
\r\r
\r $（函数（）{\r
$（'按钮，复选框）。每个（函数（）{\r
\r
//设置\r
变量$部件= $（本），\r
$按钮= $ widget.find（按钮），\r
$复选框= $ widget.find（'输入：复选框），\r
颜色= $ button.data（颜色），\r
设置= {\r
上： {\r
图标：glyphicon glyphicon检查\r
}，\r
关：{\r
图标：glyphicon glyphicon，选中\r
}\r
};\r
\r
//事件处理程序\r
$ button.on（'点击'，功能（）{\r
$ checkbox.prop：（'检查'，$ checkbox.is（'检查'）！）\r
$ checkbox.triggerHandler（'变'）;\r
updateDisplay（）;\r
}）;\r
$ checkbox.on（'变'，函数（）{\r
updateDisplay（）;\r
}）;\r
\r
//操作\r
功能updateDisplay（）{\r
VAR =器isChecked $ checkbox.is（'：检查'）;\r
\r
//设置按钮的状态\r
$ button.data（国家，（关于器isChecked）：关）;\r
\r
//设置按钮的图标\r
$ button.find（'状态图标）\r
.removeClass（）\r
.addClass（状态图标+设置[$ button.data（'状态'）]图标。）;\r
\r
//更新按钮的颜色\r
如果（器isChecked）{\r
$按钮\r
.removeClass（'BTN-默认）\r
.addClass（'btn-'+颜色+'积极'）;\r
}\r
其他{\r
$按钮\r
.removeClass（'btn-'+颜色+激活）\r
.addClass（'BTN-默认'）;\r
}\r
}\r
\r
//初始化\r
功能的init（）{\r
\r
updateDisplay（）;\r
\r
//如果注入的应用图标\r
如果（$ button.find（'状态图标）。===长度0）{\r
。$按钮prePEND（'＆LT; I类=状态图标。+设置[$ button.data（'状态'）]图标+'＆GT;＆LT; / I＆GT;'）;\r
}\r
}\r
在里面（）;\r
}）;\r
}）;\r
\r
\r
\r
\r
\r
VAR new_checkbox_button =功能（姓名，身份证）{\r
回归＆LT;李＆GT;＆LT;跨度类=按钮，复选框'＆GT;＆LT;按钮式='按钮'类='BTN BTN-SM BTN-主要活性数据色='初级'＆GT;＆LT;我类='状态图标glyphicon glyphicon检查'＆GT;＆LT; / I＆GT;＆安培; NBSP;+姓名+＆LT; /按钮＆GT;＆LT;输入类型=复选框级=隐藏检查=''＆GT; ＆LT; / SPAN＆GT;＆LT; /李＆gt;中;\r
};\r
\r
$（＃中）。点击（函数（）{\r
$（＃selected_targets）附加（new_checkbox_button（lallalala，1111））。\r
}）; \r
＆LT;脚本SRC =http://ajax.googleapis.com/ajax /libs/jqueryui/1.10.4/jquery-ui.min.js\"></script>\r
＆LT;链接HREF =http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接HREF =http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css的rel =stylesheet属性/＆GT;\r
＆LT;链接HREF =http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆所述p为H.;现有复选框＆下; / P＆GT;\r
\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=默认＆GT;默认＆LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=主＆GT;小学及LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=成功＆GT;成功与LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=信息＆GT;信息与LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=警告＆GT;警告＆LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=危险＆GT;＆危险LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度类=按钮，勾选＆GT;\r
＆LT;按钮式=按钮级=BTN数据色=链接＆GT;链接＆LT; /按钮＆GT;\r
＆LT;输入类型=复选框级=隐藏检查/＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;\r
＆所述p为H.;新复选框＆下; / P＆GT;\r
＆LT;按钮的ID =添加＆gt;点击添加复选框＆LT; /按钮＆GT;\r
＆LT; UI ID =selected_targets＆GT;＆LT; / UI＆GT; \r
I am using asp.net webform and trying to make my checkbox look like this:
http://bootsnipp.com/snippets/featured/jquery-checkbox-buttons
I trying to copy the html and js code from above link to my page but it is not working, probably missing CSS and such...
What do I need to add to my page to have the check-boxes look like the pic above, can someone give a full example (included html, css and script)?
This is the code from the link above: it is even working on here: http://jsfiddle.net/DcYhf/65/
But I copy it to my page it is not working anymore...
HTML
<span class="button-checkbox">
<button type="button" class="btn btn-lg" data-color="primary">Primary</button>
<input type="checkbox" class="hidden" checked />
</span>
JS
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
This is what I have now:
解决方案
I think there is a working example:
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length === 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
var new_checkbox_button = function(name,id){
return "<li><span class='button-checkbox'><button type='button' class='btn btn-sm btn-primary active' data-color='primary'><i class='state-icon glyphicon glyphicon-check'></i> "+name+"</button><input type='checkbox' class='hidden' checked=''></span></li>";
};
$("#add").click(function(){
$("#selected_targets").append(new_checkbox_button("lallalala","1111"));
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Existing checkboxes</p>
<span class="button-checkbox">
<button type="button" class="btn" data-color="default">Default</button>
<input type="checkbox" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="primary">Primary</button>
<input type="checkbox" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="success">Success</button>
<input type="checkbox" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="info">Info</button>
<input type="checkbox" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="warning">Warning</button>
<input type="checkbox" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="danger">Danger</button>
<input type="checkbox" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn" data-color="link">Link</button>
<input type="checkbox" class="hidden" checked />
</span>
<br/><br/><br/>
<p> New checkboxes</p>
<button id="add">click to add checkbox</button>
<ui id="selected_targets"></ui>
这篇关于使用jQuery和自举造型复选框按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
