Javascript - RadioButton, onClick not toggling checkboxes using ONLY native JS

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:

Mailing List Subscriptions

use (yesPlease.checked) only instead of (yesPlease.checked == true) since radio button is check return boolean. — Pranav
– Pranav, Commented Dec 5, 2012 at 7:51
Not the problem, but $('input[type="checkbox"][name="mailinglist"]').prop("checked", true); would do all the checkboxes with in one line... — nnnnnn
– nnnnnn, Commented Dec 5, 2012 at 8:03

Sushanth -- · Accepted Answer · 2012-12-05 16:14:28Z

3

Remove your inline javascript code and try attaching the event in the js file itself..

Try this

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

Check Fiddle

edited Dec 5, 2012 at 16:14

answered Dec 5, 2012 at 7:36

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nnnnnn Over a year ago

+1 for changing the selector, though selecting by the name attribute might be better. Also you could remove the if/else: $('fieldset input[type="checkbox"]').prop('checked', this.value === 'Yes');

Calvin · Accepted Answer · 2012-12-05 07:43:41Z

2

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/

answered Dec 5, 2012 at 7:43

Calvin

1,2958 silver badges17 bronze badges

1 Comment

OcelotXL Over a year ago

@ Calvin: thank you for the help and advice; turns out not allowed to use jQuery for this but I've since figured it out. Nonetheless, thank you Calvin, Pranav, NullPointer, and Sushanth for your direction.

Aratidgr8 · Accepted Answer · 2012-12-05 11:06:12Z

This simple code will solve the issue,

JavaScript in HEAD section :

$(document).ready(function(){ 

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

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

    });

})

Also add, the jquery library CDN source before the above code.

Markup in BODY section :

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

There is also a 2nd option to do the same task,

JavaScript in HEAD section :

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

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


}

Also add, the jquery library CDN source before the above code.

Changes in MARKUP in body section :

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

Mayank K. Swami · Accepted Answer · 2013-05-30 09:44:16Z

1

Your Code is just working perfectly :- see here:- http://jsfiddle.net/LeWbR/2/
the only problem I could imagine

have you included jquery in your page .
where you have placed your JS function.

see the left hand side dropdown in JSfiddle, if you change the the value from no wrap(body) to onDomReady or onLoad it won't work.

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

edited May 30, 2013 at 9:44

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

answered Dec 5, 2012 at 8:06

Pranav

8,9214 gold badges28 silver badges42 bronze badges

3 Comments

OcelotXL Over a year ago

@ Pranav Well initially I had everything embedded in my html document (formval.html), previously having downloaded jQuery 1.8.3 (jquer.js) and saving into my folder ('fv'), I then called the script immediately after </head><body>, as follows: <script src="fv/jquer.js"></script><script> $(document).ready(function() { // code is presently in here...,...</script> but it's just...not working : (

Pranav Over a year ago

Please include jquery in your head and also put your JS script in <head> and then try ...

OcelotXL Over a year ago

@ Pranav Please see update; jQuery isn't actually accepted for this assignment re: prof's form action parameters. Thank you immensely, though, Pranav, for your attention to the matter. I need a JS only solution though :/

Collectives™ on Stack Overflow

Javascript - RadioButton, onClick not toggling checkboxes using ONLY native JS

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related