Javascript 燃油ux复选框选择全部_Javascript_Jquery_Checkbox_Bootstrapping_Fuelux

Javascript 燃油ux复选框选择全部

javascript jquery checkbox

Javascript 燃油ux复选框选择全部,javascript,jquery,checkbox,bootstrapping,fuelux,Javascript,Jquery,Checkbox,Bootstrapping,Fuelux,我正在尝试使用复选框选择“全部”，但无法实现它 <div class="checkbox" id="myCheckbox2"> <label class="checkbox-custom" data-initialize="checkbox"> <input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">2</span>

我正在尝试使用复选框选择“全部”，但无法实现它

<div class="checkbox" id="myCheckbox2">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="">
    <span class="checkbox-label">2</span>
  </label>
</div>
<div class="checkbox" id="myCheckbox3">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="">
    <span class="checkbox-label">all</span>
  </label>
</div>

我正在使用fuelux 3.13、jquery 1.12、bootstarp js 3.13

试试这个

$（文档）.ready（函数（）{
$（#myCheckbox3[type=“checkbox”]”）。单击（函数（事件）{
if（$（this.prop（'checked'））{
$（'[type=“checkbox”]'）.prop（“选中”，true）
}否则{
$（'[type=“checkbox”]'）.prop（“选中”，false）
}
});
})


1.
2.
3.
4.
全部的

您应该在每个

中使用$（this）
而不是$（'.checkbox'）
来引用每个中的当前复选框：
$('.checkbox').each(function() { //loop through each checkbox
   $(this).checkbox('check');  
});

希望这会有所帮助。
这是解决方案
 $(document).ready(function() {

    $('#myCheckbox').click(function(event) {  //on click 
        if($("#myCheck").checkbox('isChecked')) { // check select status

            $('.cbk').each(function() { //loop through each checkbox
                $('.cbk').checkbox('check');  //select all checkboxes with class "cbk"               
            });
        }else{
            $('.cbk').each(function() { //loop through each checkbox
                $('.cbk').checkbox('uncheck'); //deselect all checkboxes with class "cbk"                       
            });         
        }
    });

});
</script>
    </head>
    <body class="fuelux">
       <div class="checkbox" id="myCheckbox">
  <label class="checkbox-custom cbk" id="myCheck" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="">
    <span class="checkbox-label">all</span>
  </label>
</div>
<div class="checkbox" id="myCheckbox2">
  <label class="checkbox-custom cbk" data-initialize="checkbox">
    <input class="sr-only"  type="checkbox" value="">
    <span class="checkbox-label">1</span>
  </label>
</div>
        <div class="checkbox" id="myCheckbox3">
  <label class="checkbox-custom cbk" data-initialize="checkbox">
    <input class="sr-only"  type="checkbox" value="">
    <span class="checkbox-label">2</span>
  </label>
</div>

$（文档）.ready（函数（）{
$（'#myCheckbox'）。单击（函数（事件）{//on click
如果（$（“#myCheck”）.checkbox（'isChecked'）{//check选择状态
$（'.cbk'）。每个（function（）{//循环遍历每个复选框
$（'.cbk'）.checkbox（'check'）；//选择类为“cbk”的所有复选框
});
}否则{
$（'.cbk'）。每个（function（）{//循环遍历每个复选框
$（'.cbk'）.checkbox（'uncheck'）；//取消选择类为“cbk”的所有复选框
});         
}
});
});
全部的
1.
2.
我也有同样的问题
您不需要为每个

指定一个

，因为（$（）
）查找共享您指定的类或id的每个元素
FuelUX的属性复选框
应用于标签
，而不是输入
如果要使用FuelUX函数，应该使用checkbox（'check'）
而不是prop（）
，后者是JQuery。考虑到我是一名网络开发新手，我想说的是，两者都是一样的
JavaScript
$(document).ready(function() {
   $('.checkbox.slc-all input').on('change', function() {
       if ($(this).is(':checked')){
         $('.checkbox.slc-chk label').checkbox('check');
       }
       else {
         $('.checkbox.slc-chk label').checkbox('uncheck');
       }
   });
});

HTML

全选
O1
O1

这对我有用。希望它也能对你起作用
这里是一个例子
$(document).ready(function() {
   $('.checkbox.slc-all input').on('change', function() {
       if ($(this).is(':checked')){
         $('.checkbox.slc-chk label').checkbox('check');
       }
       else {
         $('.checkbox.slc-chk label').checkbox('uncheck');
       }
   });
});

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <div class="checkbox slc-all">
        <label class="checkbox-custom" data-initialize="checkbox">
            <input class="sr-only" type="checkbox" value="">
            <span class="checkbox-label">Select All</span>
        </label>
    </div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <div class="checkbox slc-chk">
        <label class="checkbox-custom" data-initialize="checkbox">
            <input class="sr-only" type="checkbox" value="O1">
             <span class="checkbox-label">O1</span>
        </label>
    </div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <div class="checkbox slc-chk">
        <label class="checkbox-custom" data-initialize="checkbox">
            <input class="sr-only" type="checkbox" value="O1">
             <span class="checkbox-label">O1</span>
        </label>
    </div>
</div>