Check form with JQuery

Question

I'm trying to do a little project, but I don't know how to do it. My JQuery is affecting both forms.

$(document).ready(function() {
  $("input[value='wrong']").click(function() {

    $(this).parent()
    .addClass("wrong")
    .siblings().removeClass("right wrong");

    //$("input[type='checkbox']").prop('checked', true);
    $(this).prop('checked', true);
  });

  $("input[value='right']").click(function() {
    $(this).parent()
    .addClass("right")
    .siblings().removeClass("right wrong");

    $("input[type='checkbox']").prop('checked', true);
  });

  $("input[type='checkbox']").click(function() {
    $(this).parent()
    .siblings().removeClass("right wrong");

    $("input[type='radio']").prop('checked', false);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <fieldset>
    <legend>Form 1</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
    <label class="switch">
      <input type="checkbox">
      <div class="slider"></div>
    </label>
  </fieldset>
</form>


<form class="form3">
  <fieldset>
    <legend>Form 2</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
    <label class="switch">
      <input type="checkbox">
      <div class="slider"></div>
    </label>
  </fieldset>
</form>

I'd like to know how to make it checks the first checkbox whenever I select a radio from the first form, if I uncheck the first checkbox it uncheck the checked radio from the first form. The same thing for the second form without affect both forms.

Answer 1

I suggest you optimizing your code and separating logics to two blocks (fiddle). You will end up with an increase of event listeners, but this code follows the Separation of concerns principle allowing better support and reusability.
This code also makes checkbox-radios link to not be dependant on the markup, which is a good thing too. You can even go ahead and make a jQuery plugin by doing some minor tweaks, but it is out of scope for now.

First block

Responsible for handling "right" and "wrong" classes;

// find all inputs
$('input')
    // take only those with value set to 'right' or 'wrong'
    .filter(function() {
        return ['right', 'wrong'].indexOf($(this).val()) !== -1
    })
    // bind to the change event
    .on('change', function() {
        var $this = $(this);

        $this
            .parent()
            // set the parent class - right or wrong,
            // depending on this input's value
            .addClass($this.val())
            // remove classes from siblings
            .siblings()
            .removeClass('right wrong');
    })

$('input[type="checkbox"]').on('change', function() {
    $(this).closest('form').find('label').removeClass('right wrong');
});

Second block

Responsible for linking checkboxes and radios

// find all checkboxes with data-radio-link attribute set
$('input[type="checkbox"][data-radio-link]')
    // for each found checkbox
    .each(function() {
        var $this = $(this);

        // find all the linked radios using
        // the query from data-radio-link attribute
        var linkedRadios = $($this.data().radioLink);

        // remember those radios for future use
        $this.data('linkedRadios', linkedRadios)

        // check the checkbox when
        // any radio becomes checked
        linkedRadios.on('change', function() {
            if ($(this).prop('checked')) {
                $this.prop("checked", true);
            }
        });
    })
    // when the user changes checkbox value
    .on('change', function() {
        var $this = $(this);

        // if it becomes unchecked
        if (!$this.prop("checked")) {
            // find the linked radios that is checked and uncheck it
            $this.data().linkedRadios.filter(':checked').prop('checked', false);
        }
    });

HTML

<input type="checkbox" data-radio-link="#form-1 input[name='option']"/>

Answer 2

The snippet covers below points.

1. When a radio button will checked checkbox of respected form will be checked and on un-check of checkbox radio button will be unchecked of respected form.

2. On check of checkbox first radio button of respected form will be checked.

I have implemented code for both forms please check working snippet below.

$(document).ready(function() {

  $("input[value='wrong']").click(function() {

    $(this).parent()
    .addClass("wrong")
    .siblings().removeClass("right wrong");

    //$("input[type='checkbox']").prop('checked', true);
    $(this).closest('form').find("input[type='checkbox']").prop('checked', true);
  });

  $("input[value='right']").click(function() {
    $(this).parent()
    .addClass("right")
    .siblings().removeClass("right wrong");

    $(this).closest('form').find("input[type='checkbox']").prop('checked', true);
  });

  $("input[type='checkbox']").click(function() {
    $(this).parent()
    .siblings().removeClass("right wrong");

    if($(this). prop("checked") == false){
      $(this).closest('form').find("input[type='radio']").prop('checked', false);
                                          
    }else{
    
      $(this).closest('form').find("input[type='radio']:first").prop('checked', true);
      
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <fieldset>
    <legend>Form 1</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  </fieldset>
</form>


<form class="form3">
  <fieldset>
    <legend>Form 2</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  </fieldset>
</form>

Answer 3

Get the relative checkbox/radio

$(document).ready(function() {

  $("input[value='wrong']").click(function() {

    $(this).parent()
    .addClass("wrong")
    .siblings().removeClass("right wrong");
    
    //$("input[type='checkbox']").prop('checked', true);
    $(this).prop('checked', true);
  });

  $("input[value='right']").click(function() {
    $(this).parent()
    .addClass("right")
    .siblings().removeClass("right wrong");
    
    $(this).closest('form').find("input[type='checkbox']").prop('checked', true);
  });

  $("input[type='checkbox']").click(function() {
    $(this).parent()
    .siblings().removeClass("right wrong");
    
    $(this).closest('form').find("input[type='radio']").prop('checked', false);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <fieldset>
    <legend>Form 1</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  </fieldset>
</form>


<form class="form3">
  <fieldset>
    <legend>Form 2</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  </fieldset>
</form>