Javascript - RadioButton，onClick不使用僅切換原生JS的複選框

Question

編輯：聯繫prof;我不是實際上 [假設]在此任務上使用jQuery，因爲表單上的操作（例如prof的網站）不允許。對所有那些回答如此迅速和有益的人來說，Tyvm是個好主意。因此，我對純粹的原生JS soln 感興趣。來解決這些困難：

獲取一組複選框，根據用戶在面向DOM的表單中單擊「是」或「否」單選按鈕來打開或關閉。下面是在HTML中的職位提供

我:)單選按鈕

<label> Subscribe to our Mailing List? </label> 
    <input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()"></input> 
     <label>Yes</label> 
    <input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()"></input> 
     <label>No</label> 

II）複選框

<fieldset> 
    <legend>Mailing List Subscriptions</legend> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label> 
    <br /> 
     </fieldset> 

使用理由：（I：單選按鈕，II：複選框）。如Populating Checkboxes Based on Radio Button Click，仍然使用jQuery的，但迄今爲止我做過的最好的嘗試是：

<script> 
function subscribe(){ 
    //var yesPlease = document.getElementById("rad1"); 
    //var noThx = document.getElementById("rad2"); 
    var arr = new Array["cor", "sof", "lspa", "cyn", "tos", "spal"]; 
    //var hold = document.getElementById(arr[i]); 
    //if(hold.getAttribute(arr[i]).checked = true && arr[i] >= 1){ 
    //document.getElementById("cor").innerHTML=hold.getAttribute("checked"); 
    var hold = document.getElementsByName("mailinglist")[0]; 

    for(var i = 0; i < arr.length; i++) 
    { 
     if(document.getElementById("rad1").checked==true) 
     { 
      hold.getAttribute(arr[i]).checked == true; 
     } 
     else if(document.getElementById("rad2").checked==true) 
     { 
      hold.getAttribute(arr[i]).checked == false; 
     } 
    } 
} 
</script> 

當我加載我的文檔並點擊其中一個時，沒有任何反應。下面是有關部分的截圖，如果有幫助：感謝：

Answer 1

您需要啓動單擊單選按鈕時的處理程序。因此，點擊後元素屬性「checked」會正確更新。

下面的代碼編輯從你只包括對所有輸入型無線電

$(document).ready(function(){ 
function subscribe() { 
    $('input[type="radio"]').click(function(){ 
     var yesPlease = document.getElementById("rad1"); 
     var noThx = document.getElementById("rad2"); 
     if(yesPlease.checked == true){ 
      //check all boxes 
      $("#cor").prop("checked", true); 
      $("#sof").prop("checked", true); 
      $("#lspa").prop("checked", true); 
      $("#cyn").prop("checked", true); 
      $("#tos").prop("checked", true); 
      $("#spal").prop("checked", true); 
     } 
     else if(noThx.checked == true) { 
      //uncheck all boxes 
      $("#cor").prop("checked", false); 
      $("#sof").prop("checked", false); 
      $("#lspa").prop("checked", false); 
      $("#cyn").prop("checked", false); 
      $("#tos").prop("checked", false); 
      $("#spal").prop("checked", false); 
     } 
    }); 
} 
subscribe(); 
​});​ 

的jsfiddle單擊處理：http://jsfiddle.net/MSZtx/

Answer 2

刪除您內嵌的JavaScript代碼，並試圖安裝在JS事件文件本身..

試試這個

$('#rad1,#rad2').on('click', function() { 
     $('fieldset input[type="checkbox"]') 
           .prop('checked',this.value === 'Yes'); 
    } 
}); 

Check Fiddle

Answer 3

你的代碼只是正常使用： - 在這裏看到： - http://jsfiddle.net/LeWbR/2/
我能想象的唯一問題

1. 你有沒有在你的頁面中加入jquery。
2. 你已經放置了你的JS函數。

看到的jsfiddle左側下拉列表中，如果你從沒有包裝（身體）改變價值 onDomReady或onLoad的調用將無法正常工作。

function subscribe() { 
    var yesPlease = document.getElementById("rad1"); 
    var noThx = document.getElementById("rad2"); 
    if(yesPlease.checked){ 
    //check all boxes 
    $("#cor").prop("checked", true); 
    $("#sof").prop("checked", true); 
    $("#lspa").prop("checked", true); 
    $("#cyn").prop("checked", true); 
    $("#tos").prop("checked", true); 
    $("#spal").prop("checked", true); 
} 
else if(noThx.checked) { 
    //uncheck all boxes 
    $("#cor").prop("checked", false); 
    $("#sof").prop("checked", false); 
    $("#lspa").prop("checked", false); 
    $("#cyn").prop("checked", false); 
    $("#tos").prop("checked", false); 
    $("#spal").prop("checked", false); 
} 
} 

Answer 4

這個簡單的代碼就能解決問題，

的JavaScript在HEAD部分：

$(document).ready(function(){ 

    $(".radio-button").click(function(){ 

     if($(this).val() == "No") 
      $(".checkbox-list input").attr("disabled", true); 
     else 
      $(".checkbox-list input").attr("disabled", false); 

    }); 

}) 

上述前同時添加，jQuery庫CDN源碼。

標記在BODY部分：

<label> Subscribe to our Mailing List? </label> 
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()" class="radio-button"></input><label> Yes</label> 
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()" class="radio-button"></input><label> No</label> 

<fieldset class="checkbox-list"> 
    <legend>Mailing List Subscriptions</legend> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label> 
    <br /> 
    <input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label> 
    <br /> 
</fieldset> 

還有一個第二選擇做同樣的任務，

的JavaScript在HEAD部分：

/* Solution - 2 */ 
function subscribe(ele) 
{ 

    if(ele == "No") 
      $(".checkbox-list input").attr("disabled", true); 
    else 
      $(".checkbox-list input").attr("disabled", false); 


} 

還要添加上面代碼之前的jquery庫CDN源代碼。

變化MARKUP在主體部分：

<label> Subscribe to our Mailing List? </label> 
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe(this.value)" class="radio-button"></input><label> Yes</label> 
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe(this.value)" class="radio-button"></input><label> No</label>