arriliBiatoky
New Member
I am having 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\[code\]<label> Subscribe to our Mailing List? </label> <input type="radio" name="raydeo" id="rad1" value="http://stackoverflow.com/questions/13718329/Yes" onclick="subscribe()"></input> <label>Yes</label> <input type="radio" name="raydeo" id="rad2" value="http://stackoverflow.com/questions/13718329/No" onclick="subscribe()"></input> <label>No</label>\[/code\]II.) Checkboxes \[code\]<fieldset> <legend>Mailing List Subscriptions</legend> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/List to sell to spammers" id="tos"></input><label> List to sell to spammers</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/Spam List" id="spal"></input><label> Spam List</label> <br /> </fieldset>\[/code\]I've been researching SO and other places; so far closest I've come is via Populating Checkboxes Based on Radio Button Click, which uses jQuery in its OP-preferred answer (which I barely know anything about) and best I could conjure in my JS was:\[code\]<script>function subscribe() { 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);}}</script>\[/code\]When I load my document and click on either, nothing happens. Here's the screenshot of the concerned section if it helps (please no external library references); thanks:
Radio Buttons\[code\]<label> Subscribe to our Mailing List? </label> <input type="radio" name="raydeo" id="rad1" value="http://stackoverflow.com/questions/13718329/Yes" onclick="subscribe()"></input> <label>Yes</label> <input type="radio" name="raydeo" id="rad2" value="http://stackoverflow.com/questions/13718329/No" onclick="subscribe()"></input> <label>No</label>\[/code\]II.) Checkboxes \[code\]<fieldset> <legend>Mailing List Subscriptions</legend> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/List to sell to spammers" id="tos"></input><label> List to sell to spammers</label> <br /> <input type="checkbox" name="mailinglist" value="http://stackoverflow.com/questions/13718329/Spam List" id="spal"></input><label> Spam List</label> <br /> </fieldset>\[/code\]I've been researching SO and other places; so far closest I've come is via Populating Checkboxes Based on Radio Button Click, which uses jQuery in its OP-preferred answer (which I barely know anything about) and best I could conjure in my JS was:\[code\]<script>function subscribe() { 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);}}</script>\[/code\]When I load my document and click on either, nothing happens. Here's the screenshot of the concerned section if it helps (please no external library references); thanks: