取消选中 Javascript 不起作用的复选框

Uncheck CheckBoxes with Javascript Not working

本文关键字：复选框 不起作用 Javascript 取消      更新时间：2023-09-26

首先，我搜索了SO，有很多标题相同的问题，但没有一个有答案，我用我自己的许多不同版本尝试了所有这些答案，但没有任何效果。

因此，我有一个包含许多复选框的表单，当用户从userSelection列表中更改用户时，我想取消选中所有复选框。

<form id="myForm">
    <select id="userSelection" onchange="userChange()">
        <option value="0" acl="">Select User</option>
        <option value="1" acl="2,5">ABC</option>
        <option value="2" acl="3,4">DEF</option>
    </select> 
    <label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
    <label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
    <label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
    <label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>
<script type="text/javascript">
  function checkUncheckFields(isAllCheck)
  {
     var cbarray = document.getElementsByName('chkAc');
     for(var i = 0; i < cbarray.length; i++)
     {
          isAllCheck == false? cbarray[i].checked=false : cbarray[i].checked = true;
     }
  }
  function userChange()
  {
     checkUncheckFields(false);
     var access = $("#userSelection option:selected").attr('acl').split(',');
     $('input[type=checkbox]').each(function()
     {
        if(access.indexOf($(this).attr('ac')) > -1)
        {
            $(this).attr('checked',true);
        }
     });
  }
</script>

现在，当我转到我的页面时，手动选中所有这些复选框，然后从userSelection列表中更改我的用户，它不会取消选中复选框，如果取消选中所有复选框，则不会选中用户更改中的复选框满足条件。我正在使用 JQuery 1.11.0

我在这里制作了 JSBin请检查它 http://jsbin.com/famehaguni/1/watch 请先选中所有复选框，然后更改用户。然后您可以在我们的 userChange(( 函数中看到，我们已经给出了条件来选中带有用户 acl 属性值的复选框，但它不检查它们意味着当您选择 ABC 用户时，它应该选中 2 和 5 复选框，如果您选择 DEF 用户，那么它应该选中 3 和 4 复选框

这是你的答案：

该目录

<form id="myForm">
<select id="userSelection" >
    <option value="0" acl="">Select User</option>
    <option value="1" acl="2,5">ABC</option>
    <option value="2" acl="3,4">DEF</option>
</select> 
<label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>

爪哇语

function checkUncheckFields(isAllCheck)
{
      if(isAllCheck)
              $("input[name='chkAc']").attr("checked", "checked");
         else
            $("input[name='chkAc']").removeAttr("checked");             
}
$(document).ready(function(){
    $("#userSelection").change(function(){
        checkUncheckFields(false);
    })
})

看小提琴

不要尝试

removeAttribute：

编辑：根据您的评论，请尝试以下操作：

function userChange()
{
  checkUncheckFields(false);
  var acc = $("#userSelection option:selected").attr('acl');
  var access = acc.split(",");
  for(var i=0; i < access.length; i++)
  {
    $('input[type=checkbox]').each(function()
    {
      if(access[i] == $(this).attr('ac'))
         $(this).attr('checked',true);
    });
  }
}

它有效。

尝试使用这个：使用name=chkAc;设置取消压缩的所有复选框 

function checkUncheckFields()
  {
  $("[name=chkAc]").each(function(){
      $( this ).attr('checked', false);
    });
  
  }
  function userChange()
  {
  var access = $("#userSelection option:selected").attr('acl').split(',');
  checkUncheckFields();
  $("[name=chkAc]").each(function(){
  if($.inArray($(this).attr('ac'),access) >= 0)// your way of checking will also work.
        {
     
         $(this).prop('checked', true);
        }
  });
  
         
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" >
   <select id="userSelection" onchange="userChange()">
    <option value="0" acl="">Select User</option>
    <option value="1" acl="2,5">ABC</option>
    <option value="2" acl="3,4">DEF</option>
</select>
    <br/>
    <label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
    <label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
    <label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
    <label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>

你可以看到我的演示代码

您应该更改函数检查取消检查字段：

<form id="myForm" >
<select id="userSelection" onchange="userChange()">
    <option value="0" acl="">Select User</option>
    <option value="1" acl="2,5">ABC</option>
    <option value="2" acl="3,4">DEF</option>
</select> 
<br/>
<label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>
<script type="text/javascript">
  function checkUncheckFields(isAllCheck)
   {
     var cbarray = document.getElementsByName('chkAc');
     for(var i = 0; i < cbarray.length; i++)
     {
      if (!isAllCheck) {cbarray[i].checked = false; } else cbarray[i].checked = true;
     }
    }
  function userChange()
   {
     checkUncheckFields(false);
     var access = $("#userSelection option:selected").attr('acl').split(',');
     $('#myForm input[type=checkbox]').each(function()
       {
         if(access.indexOf($(this).attr('ac')) > -1)
          {
             $(this).attr('checked',true);
          }
      });
   }
  </script>
相关文章：