javascript - Fuel ux 复选框全选

Question

我尝试使用复选框选择所有内容，但无法实现它。

<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

Answer 1

我也遇到了同样的问题。

1. 您不需要 each 因为 class selector ($()) 查找共享您指定的类或 ID 的每个元素。
2. FuelUX 的属性 checkbox 应该在标签上使用，而不是在输入上使用。
3. 如果您想使用 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

<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