interact 2 radio buttons 2 different functions Javascript -

i have 2 radio buttons have changed clickable images using label, working great. problem is, when 1 label checked, second not unchecked.

here code of 2 functions :

var $radiobuttons = $('input[value="2"]');  $radiobuttons.click(function() {      $radiobuttons.each(function() {          $(this).parent().parent().toggleclass('checked11', this.checked);      });  });            var $2radiobuttons = $('input[value="5"]');  $2radiobuttons.click(function() {      $2radiobuttons.each(function() {          $(this).parent().parent().toggleclass('checked12', this.checked);      });  });

you need interlink radio buttons. giving them name attribute. in example i've added 2 sets of radio buttons. changed selector of jquery function select on name attribute. name attribute can same multiple elements in contradiction id attribute must unique throughout entire document. can use advantage when selecting elements using jquery.

solution:

it seems rely on checked attribute of radio toggle classes. make set of radios work must grouped same name.

in example background-color switches between grouped radio buttons. green group 1 , red group 2. left functions intact, changed selector. html in solution there cope parent().parent() selecting do. can improved. jquery's parent accepts selectors.

var $radiobuttons = $('input[name="radiogaga"]');  $radiobuttons.click(function() {    $radiobuttons.each(function() {      $(this).parent().parent().toggleclass('checked11', this.checked);    });  });    var $2radiobuttons = $('input[name="radioblabla"]');  $2radiobuttons.click(function() {    $2radiobuttons.each(function() {      $(this).parent().parent().toggleclass('checked12', this.checked);    });  });

.checked11 {    background-color: lime;  }  .checked12 {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div>      <span>     <label for="radio1" >this radio 1</label>    <input name="radiogaga" value="2" type="radio" id="radio1" />    </span>  </div>  <div>    <span>    <label for="radio2" >this radio 2</label>    <input name="radiogaga" value="3" type="radio" id="radio2" />      </span>  </div>    <div>      <span>     <label for="radio3" >this radio 3</label>    <input name="radioblabla" value="4" type="radio" id="radio3" />    </span>  </div>  <hr>  <div>    <span>    <label for="radio4" >this radio 4</label>    <input name="radioblabla" value="5" type="radio" id="radio4" />      </span>  </div>