javascript - 选中/取消选中复选框

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条件，

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