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/

我想选择我的主checbox并检查其他复选框，但我做错了。当我尝试选择我的主复选框时，没有任何反应。

Answer 1

您使用id代替其他复选框而不是class并使用一个班轮this.checked而不是if condition，

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

仅供参考，您应将li与ul

一起使用

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

这是一个工作示例。我还修改了您的Fiddle

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

在代码中检查span内是否有ul个标签..最好使用ul，li并添加CSS以显示内联..这样你就可以了可以清理你的HTML。

要选中所有复选框，您可以在#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"

Fiddle

选中/取消选中复选框

5 个答案: