How to hide/show or switch in between two div-form fields using check box?

Question

I am presently working on a form and I would like to show/hide div-form field using check box. In my research I came across;

show/hide input-form field using radio button here: https://codepen.io/chriscoyier/pen/LEGXOK

Please I would like to apply check box instead of radio-buttin to show/hide div-form fields and not input.

Example: I want to create a from filed where an applicant can either upload their cv/resume using the check-box

Upload form script:

<div class="element-file" title="Click here to Upload Resume"><label class="title"></label><div class="item-cont"><label class="large"><div class="button">UPLOAD</div><div class="file_text">NO UPLOAD DETECTED</div><span class="icon-place"></span></label></div></div>

OR

Manual Entry:

<div class="element-input" title="Enter your Full Name as indicated here."><label class="title"><span class="required">Required</span></label><div class="item-cont"><span class="icon-place"></span></div></div>

I want to use check-box to switch in between this two Div-form fields Using the behaviour from this sample: https://codepen.io/chriscoyier/pen/LEGXOK

Thanks in advance for your support.

It should be identical. Go to the codepen, and change the input type from "radio" to "checkbox" and you'll see it works. However, since you are looking at an either-or case, it seems a radio would be more appropriate than a check box. — Tom Pietrosanti, Sep 22 '17 at 20:29
Possible duplicate of [making checkboxes behave like radio buttons](https://stackoverflow.com/questions/23523987/making-checkboxes-behave-like-radio-buttons) — DCR, Sep 22 '17 at 20:40
That will work but not like radio buttons. See https://stackoverflow.com/questions/23523987/making-checkboxes-behave-like-radio-buttons for how to do it — DCR, Sep 22 '17 at 20:41

score 0 · Answer 1 · answered Sep 22 '17 at 21:07

Just add this code to your bindUIActions method. It will toggle the checkboxes.

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired, function() {
      if (this.id == 'choice-animals-dogs') {
        var checked = ($('#choice-animals-cats').checked) ? true : false;
        $('#choice-animals-cats').prop('checked', checked);
      }
      if (this.id == 'choice-animals-cats') {
        var checked = ($('#choice-animals-dogs').checked) ? true : false;
        $('#choice-animals-dogs').prop('checked', checked);
      }
    });
  },

How to hide/show or switch in between two div-form fields using check box?

1 Answers1