【问题标题】：fuel ux checkbox select all燃料 ux 复选框全选
【发布时间】：2016-02-19 08:51:05
【问题描述】：

我正在尝试使用复选框全选，但无法实现。

<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>

$(document).ready(function() {
  $('#myCheckbox').click(function(event) {
    if ($("#myCheckbox").checkbox('isChecked')) {
      $('.checkbox').each(function() { //loop through each checkbox
        $('.checkbox').checkbox('check');
      });
    } else {
      $('.checkbox').each(function() {
        $('.checkbox').checkbox('uncheck');
      });
    }
  });
});

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

【问题讨论】：

标签： javascript jquery checkbox bootstrapping fuelux

【解决方案1】：

我遇到了同样的问题。

您不需要each，因为class selector ($()) 会查找与您指定的类或ID 相同的每个元素。
FuelUX 的属性checkbox 应该在label 上使用，而不是在input 上使用。
如果你想使用FuelUX函数，你应该使用checkbox('check')而不是prop()，即JQuery。鉴于我是 Web 开发的新手，我会说两者都是一样的。

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

<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>

它对我有用。希望它也对您有用。

这里是fiddle的例子

【讨论】：

【解决方案2】：

试试这个

$(document).ready(function() {
    $('#myCheckbox3 [type="checkbox"]').click(function(event) {
        if ($(this).prop('checked')) {
            $(' [type="checkbox"]').prop("checked", true)
        } else {
            $(' [type="checkbox"]').prop("checked", false)
        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox" id="myCheckbox2">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only"  type="checkbox" value="">
<span class="checkbox-label">1</span>
</label>
</div>
<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="myCheckbox2">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only"  type="checkbox" value="">
<span class="checkbox-label">3</span>
</label>
</div>
<div class="checkbox" id="myCheckbox2">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only"  type="checkbox" value="">
<span class="checkbox-label">4</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>

【讨论】：

【解决方案3】：

您应该在each 中使用$(this) 而不是$('.checkbox') 来引用每个内部的当前复选框：

$('.checkbox').each(function() { //loop through each checkbox
   $(this).checkbox('check');  
});

希望这会有所帮助。

【讨论】：

【解决方案4】：

这里有解决办法

 $(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>

【讨论】：