javascript - Fuel ux复选框，全选

我正在尝试使用复选框选择所有选项，但无法实现它。

<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

最佳答案

我有同样的问题。


您不需要each，因为class selector（$()）查找与您指定的类或ID共享的每个元素。
FuelUX的属性checkbox应该在label上使用，而不是在input上使用。
如果要使用FuelUX函数，则应使用checkbox('check')代替JQuery的prop()。考虑到我是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