燃料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，bootstrap js 3.13

Answer 1

我有同样的问题。

1. 你不需要each，因为class selector（$()）查找共享你指定的类或id的每个元素。
2. FuelUX的属性checkbox应该在label上使用，而不是在input上使用。
3. 如果你想使用FuelUX函数，你应该使用checkbox('check')而不是jaz的prop()。鉴于我是网络开发的新手，我会说两者都是一样的。

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

Answer 2

Try this

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

Answer 3

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

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

希望这会有所帮助。

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