如何选中和取消选中div中的所有复选框答案

【问题标题】：How to check and uncheck all checkboxes inside a div如何选中和取消选中div中的所有复选框
【发布时间】：2015-03-18 05:00:06
【问题描述】：

我想取消选中 'test' div 中的所有复选框，而不选中那些属性被禁用的复选框。

<div id="test">
   <input type="checkbox" id="check1" name="check1">
   <input type="checkbox" id="check01" name="check01" disabled="disabled">
   <input type="checkbox" id="check2" name="check2" disabled="disabled">
   <input type="checkbox" id="check3" name="check3">
   <input type="checkbox" id="check4" name="check4">
   <input type="checkbox" id="check50" name="check50">
   <input type="checkbox" id="check6" name="check6">   
</div>
<input type="button" id="uncheckAll" onclick="uncheckAll('test')">
<script language="javascript">
 function uncheckAll() {
     $('#' + divid + ' :checkbox').attr('checked', false);
     /*
   This function uncheck all of the checkboxes, which i don't want, i want to
   uncheck only checkboxes whose attributes are not disabled.
  /*
}*/
</script>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您需要接受名为 divId 的参数，然后使用 :enabled filter 过滤掉禁用的复选框

function uncheckAll(divid) {
    $('#' + divid + ' :checkbox:enabled').prop('checked', false);
}

演示：Fiddle

如果没有 jQuery

function uncheckAll(divid) {
    var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
    for(var i =0; i< checks.length;i++){
        var check = checks[i];
        if(!check.disabled){
            check.checked = false;
        }
    }
}

演示：Fiddle

【讨论】：

【解决方案2】：

您可以为每个输入使用一个公共类。试试这个

<div id="test">
            <input type="checkbox" id="check1" class="check" name="check1">
            <input type="checkbox" id="check01" class="check" name="check01" disabled="disabled">
            <input type="checkbox" id="check2" class="check" name="check2" disabled="disabled">
            <input type="checkbox" id="check3" class="check" name="check3">
            <input type="checkbox" id="check4" class="check" name="check4">
            <input type="checkbox" id="check50" class="check" name="check50">
            <input type="checkbox" id="check6" class="check" name="check6">   
        </div>
    <input type="button" id="uncheckAll" onclick="uncheckAll()">
<script language="javascript">
  function uncheckAll()
{
  $("input.check").each(function(){
    if($(this).prop('disabled')!=true)
    {
      $(this).attr('checked',false);
    }
  });

}
</script>

【讨论】：

【解决方案3】：

以下单行 jQuery 代码将完成您的工作。

    function uncheckAll(divid) {
        $('#' + divid + ' :checkbox:not([disabled])').attr('checked', false);
    }

【讨论】：

【解决方案4】：

有史以来最简单的解决方案：

// index.html 在<body> 中创建这个：

<button type="button" id="desativar-tudo">Uncheck All</button>
<button type="button" id="ativar-tudo">Check All</button>

// 之后创建这个：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">         

function uncheckAll() {$('input').prop('checked', false);}
function CheckAll(){$('input').prop('checked', true);}

$('#desativar-tudo').click(uncheckAll);
$('#ativar-tudo').click(CheckAll);

</script>

【讨论】：