Question

首先，我搜索了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 attibute值复选框，但它不检查它们意味着当你选择ABC用户然后它应该检查2和5复选框，如果你选择DEF用户然后应该检查3和4复选框

Answer 1

而不是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);
    });
  }
}

有效。

Answer 2

这是你的答案：

HTML

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

Javascript

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);
    })
})

请参阅Fiddle

Answer 3

尝试使用此： //使用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>

Answer 4

您可以看到我的DEMO CODE

您应该更改功能checkUncheckFields：

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

使用Javascript取消选中CheckBox并不起作用

4 个答案: