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

admin管理员组

文章数量:1324621

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:

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:

• javascript
• html
• checkbox
• radio-button

Share Improve this question Follow edited May 23, 2017 at 10:34 CommunityBot 111 silver badge asked Dec 5, 2012 at 7:30 OcelotXLOcelotXL 15822 gold badges66 silver badges1414 bronze badges 2

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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

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

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>

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

1. have you included jquery in your page .
2. 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);
}
}

​

本文标签： htmlJavascriptRadioButtononClick not toggling checkboxes using ONLY native JSStack Overflow