jeudi 3 novembre 2016

Check form with JQuery

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="http://ift.tt/1oMJErh"></script>
<form class="form3">
  <fieldset>
    <legend>Part 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>Part 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>

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.




Aucun commentaire:

Enregistrer un commentaire