Question

edit: Contacted the prof; I’m not actually [supposed] to use jQuery on this assignment as the action on the form (e.g. prof’s website) doesn’t allow for it. Tyvm to all who replied so quickly and helpfully. Therefore, I am interested in a pure, native JS soln. to resolving these difficulties:

getting a group of checkboxes to toggle “on or off” based on whether the user clicks “Yes” or “No” radio button in a DOM-oriented form. Here’s the HTML for (I: the radio buttons, II: the checkboxes):

I:) Radio Buttons

<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.) Checkboxes

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

Using the rationale provided in posts such as Populating Checkboxes Based on Radio Button Click, which still uses jQuery, the best attempt I have made thus far is:

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

When I load my document and click on either, nothing happens. Here’s the screenshot of the concerned section if it helps:thanks:

Answer 1

You need to an action handler when the radio button is clicked. So that the element attribute “checked” is correctly updated upon clicking.

The code below is edited from yours to just include the click handler on all input type radio

$(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/