Auto matching radius in jquery

I have a dynamic radio in one LIke div. Here the name of the radio is dynamic and the value is also:

<input type="radio" name="first[1]" value="1" />
<input type="radio" name="first[2]" value="2" />
<input type="radio" name="first[3]" value="3" />


And the second div I have which have these radios : 

<input type="radio" name="second[1]" value="1" />
<input type="radio" name="second[2]" value="2" />
<input type="radio" name="second[3]" value="3" />

My question is that if I checked (yes) the first switch div then the second second radio station is automatically selected. This is similar to both div radios working together to check fo yes and without both conditions.

I am trying this to get the val of the first div, but here I am not getting the value.

<script type="text/javascript">
$(document).ready(function(){
alert('ok');
$('input:radio').on('click',function() { 
var obj=$('input[name="first"]:checked').val();
alert(obj);
});
});
</script>


Can any one please help me related this?

Providing some additional information:

+4
source share
2 answers
<script type="text/javascript">
$(document).ready(function(){
    var first = $('input[name^=first]');
    var second = $('input[name^=second]');
    first.change(function(){
        var index = $(this).index();
        if(this.checked){
            second.eq(index).prop('checked', true);
        }
});
</script>
0
source

// Add your javascript here
$(function() {
  $('input[name^="first"],input[name^="second"]').on('change', function() {

    let i = $(this).index();
    $('input[name^="first"]').each(function(j) {
      $(this).prop('checked', i === j);
    });
    $('input[name^="second"]').each(function(j) {
      $(this).prop('checked', i === j);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="first[1]" value="1" />A
  <input type="radio" name="first[2]" value="2" />B
  <input type="radio" name="first[3]" value="3" />C
</div>


<div>
  <input type="radio" name="second[1]" value="1" />AA
  <input type="radio" name="second[2]" value="2" />BB
  <input type="radio" name="second[3]" value="3" />CC
</div>
Run code
0
source

Source: https://habr.com/ru/post/1693872/


All Articles