Conditionally show/hide unnested label/input form fields based on other input field

Question

Sorry for not being clearer in the original post.

I'm trying to hide BOTH the top two form field areas when the bottom checkbox is unchecked and not pass on any values when they are hidden. It is aregistration form for wordpress and I don't want to amend the html, which would make it easier because I could next the labels and inputs inside divs to hide.

shown here the IDs:

(top checkbox) ws-plugin--s2member-custom-reg-field-newsletters (middle radio) ws-plugin--s2member-custom-reg-field-jobalerts (bottom checkbox ID) ws-plugin--s2member-custom-reg-field-opt-in

@Mosh suggestion below is close, but only hides one.

 // Store the `p` node which contains the label. var collapseParent = $('label[for="ws-plugin--s2member-custom-reg-field-jobalerts"]').parent(); // Store the `checkbox` that we want to "listen" to var checkbox = $('[name="ws_plugin__s2member_custom_reg_field_opt_in"]'); // Attach the `change` event on the checkbox and trigger the event so it will fire on page load checkbox.change(toggle).trigger('change'); // show/hide the `p` node depeneds if the checbox was checked or not function toggle() { collapseParent.toggle(checkbox.is(':checked')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <label for="ws-plugin--s2member-custom-reg-field-newsletters"> <span style="display:none;">Do you wish to receive JETAAUK Newsletters? *</span> </label> <input type="checkbox" value="1" checked="checked" name="ws_plugin__s2member_custom_reg_field_newsletters" id="ws-plugin--s2member-custom-reg-field-newsletters" aria-required="true" tabindex="59" class="ws-plugin--s2member-custom-reg-field s2conditional1"> <label for="ws-plugin--s2member-custom-reg-field-newsletters" style="display:inline !important; margin:0 !important;">Do you wish to receive JETAAUK Newsletters?</label> </p> <p> <label for="ws-plugin--s2member-custom-reg-field-jobalerts"> <span>Do you wish to receive job alerts (digest)? *</span> </label> <br> <input type="radio" value="weekly" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---0" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-0" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">weekly</label>&nbsp;&nbsp; <input type="radio" value="daily" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---1" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-1" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">daily</label>&nbsp;&nbsp; <input type="radio" value="none" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---2" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-2" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">none</label> </p> <p> <label for="ws-plugin--s2member-custom-reg-field-opt-in"> <input type="checkbox" name="ws_plugin__s2member_custom_reg_field_opt_in" id="ws-plugin--s2member-custom-reg-field-opt-in" class="ws-plugin--s2member-custom-reg-field" value="1" checked="not" tabindex="70"> <span style="color:#be0026;"><strong>=&gt; Yes, I wish to receive JETAAUK Newsletters via email &lt;= </strong></span> </label> </p> 

Answer 1

This code is a little beat ugly but this is the "cost" of not changing the html .

Please read the notes within the code so you can understand what I did.

If you want to do this functionality to other checkbox/radio buttons, just change the selectors of the elements (label/checkbox or p node)

 // Store the `p` node which contains the label. var collapseParent = $('label[for="ws-plugin--s2member-custom-reg-field-jobalerts"]').parent(); // Store the `checkbox` that we want to "listen" to var checkbox = $('[name="ws_plugin__s2member_custom_reg_field_newsletters"]'); // Attach the `change` event on the checkbox and trigger the event so it will fire on page load checkbox.change(toggle).trigger('change'); // show/hide the `p` node depeneds if the checbox was checked or not function toggle() { collapseParent.toggle(checkbox.is(':checked')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <label for="ws-plugin--s2member-custom-reg-field-newsletters"> <span style="display:none;">Do you wish to receive JETAAUK Newsletters? *</span></label> <input type="checkbox" value="1" checked="checked" name="ws_plugin__s2member_custom_reg_field_newsletters" id="ws-plugin--s2member-custom-reg-field-newsletters" aria-required="true" tabindex="59" class="ws-plugin--s2member-custom-reg-field s2conditional1"> <label for="ws-plugin--s2member-custom-reg-field-newsletters" style="display:inline !important; margin:0 !important;">Do you wish to receive JETAAUK Newsletters?</label></p> <p> <label for="ws-plugin--s2member-custom-reg-field-jobalerts"> <span>Do you wish to receive job alerts (digest)? *</span></label><br> <input type="radio" value="weekly" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---0" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-0" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">weekly</label>&nbsp;&nbsp;<input type="radio" value="daily" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---1" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-1" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">daily</label>&nbsp;&nbsp;<input type="radio" value="none" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---2" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-2" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">none</label></p> <p> <label for="ws-plugin--s2member-custom-reg-field-opt-in"> <input type="checkbox" name="ws_plugin__s2member_custom_reg_field_opt_in" id="ws-plugin--s2member-custom-reg-field-opt-in" class="ws-plugin--s2member-custom-reg-field" value="1" checked="not" tabindex="70"> <span style="color:#be0026;"><strong>=&gt; Yes, I wish to receive JETAAUK Newsletters via email &lt;= </strong></span></label></p> 

Answer 2

In order to hide the two extra form sections you will need to use JavaScript. I personally use the jQuery plugin, which from your comments regarding Mosh Feu's answer, isn't going to be a problem.

The code isn't optimal, but as you're unable to change the HTML, we'll work with what we have.

 // Store the checkbox we'll be monitoring for changes var checkTrigger = $('#ws-plugin--s2member-custom-reg-field-opt-in'); // Store the items we want to show/hide // I store the 'none' radio button here - if the HTML changes, this will break // we use this particular radio button further down var jobAlerts = $('#ws-plugin--s2member-custom-reg-field-jobalerts---2'); var newsletterCheck = $('#ws-plugin--s2member-custom-reg-field-newsletters'); // Check for the change of the checkbox checkTrigger.change(function() { toggleForm(checkTrigger.is(':checked')); }); // Toggle the form function toggleForm(isChecked) { jobAlerts.parent().toggle(isChecked); newsletterCheck.parent().toggle(isChecked); // We'll uncheck the red Newsletter checkbox too, if it's being hidden // and we'll set the job alerts to none; if (!isChecked) { newsletterCheck.prop("checked", false); jobAlerts.prop("checked", true); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <label for="ws-plugin--s2member-custom-reg-field-newsletters"> <span style="display:none;">Do you wish to receive JETAAUK Newsletters? *</span> </label> <input type="checkbox" value="1" checked="checked" name="ws_plugin__s2member_custom_reg_field_newsletters" id="ws-plugin--s2member-custom-reg-field-newsletters" aria-required="true" tabindex="59" class="ws-plugin--s2member-custom-reg-field s2conditional1"> <label for="ws-plugin--s2member-custom-reg-field-newsletters" style="display:inline !important; margin:0 !important;">Do you wish to receive JETAAUK Newsletters?</label> </p> <p> <label for="ws-plugin--s2member-custom-reg-field-jobalerts"> <span>Do you wish to receive job alerts (digest)? *</span> </label> <br> <input type="radio" value="weekly" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---0" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-0" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">weekly</label>&nbsp;&nbsp; <input type="radio" value="daily" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---1" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-1" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">daily</label>&nbsp;&nbsp; <input type="radio" value="none" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---2" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-2" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">none</label> </p> <p> <label for="ws-plugin--s2member-custom-reg-field-opt-in"> <input type="checkbox" name="ws_plugin__s2member_custom_reg_field_opt_in" id="ws-plugin--s2member-custom-reg-field-opt-in" class="ws-plugin--s2member-custom-reg-field" value="1" checked="not" tabindex="70"> <span style="color:#be0026;"><strong>=&gt; Yes, I wish to receive JETAAUK Newsletters via email &lt;= </strong></span> </label> </p> 

The jQuery code assumes that the HTML won't change. If the ID values of the checkboxes change, then the jQuery will break.

I know you don't want to change the HTML here, but from a UI point of view, it doesn't make sense that the bottom checkbox hides those above it. Users read left-to-right, top-to-bottom and having the bottom checkbox interacting with elements above it, this general rule is broken.

You should consider moving the triggering checkbox to the top.