取消選中JavaScript框不工作的複選框

Question

首先，我搜索了並且有很多相同標題的問題，但沒有一個答案，我試着用我自己的許多不同版本嘗試所有這些答案，但沒有任何作用。

因此，我有一個有很多複選框的表單，我想在用戶從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 plese首先檢查所有複選框，然後更改用戶。然後你可以在我們的userChange（）函數中看到我們給出了使用用戶的acl屬性值檢查複選框的條件，但是它沒有檢查它們的意思，當你選擇ABC用戶時，它應該檢查2和5複選框，如果你選擇DEF用戶，那麼它應檢查3個4複選框

Answer 1

嘗試使用這樣的： //設置unchcked所有複選框與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 2

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

你可以看到我的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> 

Answer 4

這裏是你的答案：

的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