Given two yes/no fields, how can I use JavaScript to make the field 2 value checked "Yes" whenever the field 1 value is checked "Yes"?

Question

If Field 1 is checked "Yes" then Field 2 should be checked "Yes"

This is what I've been trying so far:

Field 1:

<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG||&nbsp;</label></div>
<div class="col9"><input type="radio" name="Field1" id="Question15yes" value="Yes" onclick="Check()">Yes&nbsp;<input type="radio" name="Field1" value="No" onclick="Check()">No</div>

Field 2:

<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG||&nbsp;</label></div>
<div class="col9"><input type="radio" name="Field2" id="Question16yes" value="Yes" onclick="Check()">Yes&nbsp;<input type="radio" name="Field2" value="No" onclick="Check()">No</div>

I was trying something as simple as this js below, but I'm definitely missing something. Any help would be greatly appreciated!

<script language="JavaScript">    
function Check()  {
$("#Question15yes").click(function(){
     if ($(this).is(':checked'))
     {
         $("#Question16yes").val("Yes");
     }
        }
      });
    }      
</script>

Answer 1

Make sure you are including JQuery in your page.

To bind your event, you need to wait that the DOM is fully loaded , else you would try to use an element that doesn't exist yet.

<script language="JavaScript">    
    $(function() {
      $(".question-checkbox").click(function(){
        if ($(this).is(':checked'))
        {
          console.log($(this));
        }
      });
    });     
</script>

Also, you might want to change the JQuery selector from ID to class, so that you can use the same code for all similar checkboxes.

Put a .question-checkbox class on the inputs, and remove all onclicks.

Answer 2

Use this for a single checkbox with the class name "example":

 $('input.example').on('change', function() {
  $('input.example').not(this).prop('checked', false);
 });

Answer 3

You don't have to call check on every click. Once document loads, call it once.

 window.addEventListener("load", function(){ $("input[type='radio']").on("click", function(){ if($("#Question15yes").is(':checked')) $("#Question16yes").prop("checked", true); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="entire"> <div class="col3"> <label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG||&nbsp;</label> </div> <div class="col9"> <input type="radio" name="Field1" id="Question15yes" value="Yes"> Yes&nbsp; <input type="radio" name="Field1" value="No" >No </div> <div class="entire"> <div class="col3"> <label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG||&nbsp;</label> </div> <div class="col9"> <input type="radio" name="Field2" id="Question16yes" value="Yes"> Yes&nbsp; <input type="radio" name="Field2" value="No"> No </div>