选中/取消选中复选框

Question

HTML：

<ol>
 <span>Select All<input id='selectall' type="checkbox" onclick='test(this.id);'>
    <ul>
      <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
    </ul>
 </span>
</ol>

JS：

function test(clicked_id) {
    if ($("#" + clicked_id).prop("checked", true)) {
        $('#' + clicked_id + ' .' + clicked_id).prop('checked', true);
    } else {
        $('#' + clicked_id + ' .' + clicked_id).prop('checked', false);
    }
}

https://jsfiddle.net/j59eeqgu/

我想选择我的主复选框，并同时选中其他复选框，但是我做错了。 当我尝试选择我的主复选框时，什么也没有发生。

Answer 1

您将id用于其他复选框而不是class并使用一个衬里this.checked而不是if condition ，

$('#selectall').click(function(){
 $('.selectall[type="checkbox"]').prop('checked', this.checked);
});

仅供参考，您应该在ul使用li

 $('#selectall').click(function(){ $('.selectall[type="checkbox"]').prop('checked', this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>Select All<input id='selectall' type="checkbox"> <ul> <span class='selectall'>1.<input type="checkbox" class='selectall'></span> <span class='selectall'>2.<input type="checkbox" class='selectall'></span> <span class='selectall'>3.<input type="checkbox" class='selectall'></span> <span class='selectall'>4.<input type="checkbox" class='selectall'></span> <span class='selectall'>5.<input type="checkbox" class='selectall'></span> </ul> </span> 

Answer 2

这是一个有效的示例。 我还编辑了你的小提琴

 $(document).on('click', '#selectall', function() { if($(this).is(':checked')) $(this).parent().find('input[type="checkbox"]').prop('checked', true); else $(this).parent().find('input[type="checkbox"]').prop('checked', false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol> <span>Select All<input id='selectall' type="checkbox"> <ul> <span class='selectall'>1.<input type="checkbox" class='selectall'></span> <span class='selectall'>2.<input type="checkbox" class='selectall'></span> <span class='selectall'>3.<input type="checkbox" class='selectall'></span> <span class='selectall'>4.<input type="checkbox" class='selectall'></span> <span class='selectall'>5.<input type="checkbox" class='selectall'></span> </ul> </span> </ol> 

编辑：从评论更新：

 $(document).ready(function() { var $selects = $('input[id^="select_"]'); $selects.on('click', function() { var $checkboxes = $(this).parent().find('input[type="checkbox"]'); $checkboxes.prop('checked', this.checked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol> <span>Select All<input id='select_0' type="checkbox"> <ul> <span class='selectall'>1.<input type="checkbox" class='selectall'></span> <span class='selectall'>2.<input type="checkbox" class='selectall'></span> </ul> </span> </ol> <ol> <span>Select All<input id='select_1' type="checkbox"> <ul> <span class='selectall'>1.<input type="checkbox" class='selectall'></span> <span class='selectall'>2.<input type="checkbox" class='selectall'></span> </ul> </span> </ol> 

编辑2：改进您的HTML，您可以节省很多代码，更易于处理。 您可以根据需要添加更多列表。

 $(document).ready(function() { var $list = $('ul.my-whatever'); var $selects = $list.find('li > input[type="checkbox"]'); $selects.on('click', function() { var $checkboxes = $(this).parent().find('input[type="checkbox"]'); $checkboxes.prop('checked', this.checked); }); }); 

 ul li { margin-bottom: 10px; } ul ul li { margin: 0; } ul ul { list-style: decimal; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="my-whatever"> <li> Select All <input type="checkbox"> <ul> <li>Something <input type="checkbox"></li> <li>Something <input type="checkbox"></li> </ul> </li> <li> Select All <input type="checkbox"> <ul> <li>Something <input type="checkbox"></li> <li>Something <input type="checkbox"></li> </ul> </li> <li> Select All <input type="checkbox"> <ul> <li>Something <input type="checkbox"></li> <li>Something <input type="checkbox"></li> </ul> </li> </ul> 

Answer 3

检查代码中是否在ul内具有span标记。最好使用ul ， li并添加CSS以内联显示。.这样就可以清理html。

要选中所有复选框，可以将click事件处理函数添加到#selectall复选框中：

 $('#selectall').on('click', function(){ $('input:checkbox').prop('checked', this.checked); }); 

 ul { list-style-type: none; margin: 10px 0 0 0; padding: 0; } li { float: left; padding: 0 8px 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Select All <input type="checkbox" id="selectall"> <ul> <li>1.<input type="checkbox"></li> <li>2.<input type="checkbox"></li> <li>3.<input type="checkbox"></li> <li>4.<input type="checkbox"></li> <li>5.<input type="checkbox"></li> </ul> 

Answer 4

$("#selectall").change(function() {
  var parentChecked = this.checked;
        $("input.selectall").each(function(){
         $(this).prop("checked",parentChecked);
        });
});

https://jsfiddle.net/j59eeqgu/7/

Answer 5

您可以尝试使用此jQuery脚本将checkAll函数添加到checkboxes 。

HTML

<ol>
  Select All
  <input id='selectall' class="selectall" type="checkbox">
  <ul>
    1.<input type="checkbox" class='selectme'> 
    2.<input type="checkbox" class='selectme'> 
    3.<input type="checkbox" class='selectme'> 
    4.<input type="checkbox" class='selectme'> 
    5.<input type="checkbox" class='selectme'>
  </ul>
</ol>

jQuery的

$(function() {
  $('.selectall').click(function() {
    $('.selectme').prop('checked', $(this).is(':checked'));
  });

  $('.selectme').click(function() {
    if ($('.selectme:checked').length == $('.selectme').length) {
      $('.selectall').prop('checked', true);
    } else {
      $('.selectall').prop('checked', false);
    }
  });
});

我已经将您的class更新为input type="checkbox"

小提琴