燃油 UX 复选框全选

fuel ux checkbox select all

本文关键字：全选 复选框 UX 燃油      更新时间：2023-09-26

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

<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

我遇到了同样的问题。

  1. 您不需要each，因为类选择器 （ $() ） 查找共享您指定的类或 id 的每个元素。
  2. FuelUX的属性checkbox应该用在label上，而不是在input上。
  3. 如果你想使用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>

它对我有用。希望它也能为您工作。

这里的例子小提琴

试试这个

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

您应该在each中使用$(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>
相关文章：