test check radio buttons

by mobilat

HTML

<h2>
works with checkboxes
</h2>
<input type="checkbox" name="check" class="checkbox1" id="cb1" ><label>one</label>
<br>
<input type="checkbox" name="check" class="checkbox2" id="cb2"> <label><span>two</span></label>
<br>
<input type="checkbox" name="check" class="checkbox3" id="cb3"> <label>three</label>
<hr>
<div id="callout-check" class="hidden">
    CLICK THE CHECKBOX TO HIDE ME!
</div>
<hr><hr>
<h2>
.. not with radiobuttons.
</h2>
<input type="radio" name="test" class="checkbox1" id="rd1" ><label>one</label>
<br>
<input type="radio" name="test" class="checkbox2" id="rd2"> <label><span>two</span></label>
<br>
<input type="radio" name="test" class="checkbox3" id="rd3"> <label>three</label>
<hr>
<div id="callout-radio" class="hidden">
    CLICK THE CHECKBOX TO HIDE ME!
</div>

CSS

#callout-check {
  padding: 10px;
  background-color: aqua;
}

#checkout-address {
  padding: 10px;
  background-color: fuchsia;
}

label span {
  font-size: larger;

}


.hidden {
  display: none;
}
.flex {
    display:flex;
}

JavaScript

$(document).ready(function() {
    
    // checkboxes
    $("#cb2").change(function() {
      $("#callout-check").toggleClass("flex", this.checked)
    }).change();
    
    
    // radio
    $('body').on('change','input[type="radio"]',function () {

      //alert('Test1 checked = ' + $('#rd1').prop('checked') + '. Test2 checked = ' + $('#rd2').prop('checked') + '. Test3 checked = ' + $('#rd3').prop('checked'));
      if($('#rd2').prop('checked')) {
					$("#callout-radio").addClass("flex");
			} else {
 					$("#callout-radio").removeClass("flex");
      }
    });

    
    
});