CODEWITHSUNDEEP
javascripthtmljquery
Jonn Jhereco Pulido
Jonn Jhereco Pulido

Reputation: 31

Get all the value of a radio button that is checked in a specific div

Me and my friend are trying to solve this problem. We want to get all the value of a radio button that is checked in a div

Div1

Name=Radio1 checked

Name=Radio2 unchecked

Name=Radio3 checked

Div2

Name=radio1 unchecked (cuz in div1 it's checked)

Name= radio2 unchecked

Name=radio3 unchecked (same as radio1)

So the scenario is, when i click the div2 radio3 the div1 radio3 will be unchecked and the div2 radio3 will be check. I want to print all the value that is checked per div

HTML:

<!-- ADDRESS 1  -->

<input type="radio" id="11" name="addressname1" value="address1" checked> 
<label for="11">address1</label>

<input type="radio" id="12" name="addressname2" value="address2"> 
<label for="12">address2</label>

<input type="radio" id="13" name="addressname3" value="address3" > 
<label for="13">address3</label>

<!-- END ADDRESS 1 -->
<br>
<input type="text" id="1" value="" placeholder="result of address 1 here">
<br>
<br>
<!-- ADDRESS 2  -->

<input type="radio" id="21" name="addressname1" value="address1" > 
<label for="21">address1</label>

<input type="radio" id="22" name="addressname2" value="address2" checked> 
<label for="22">address2</label>

<input type="radio" id="23" name="addressname3" value="address3" checked>   
<label for="23">address3</label> 
<!-- END ADDRESS 2 -->

 <br>
<input type="text" id="2" value="" placeholder="result of address 2 here">

Can anyone have an idea?

Upvotes: 1

Views: 643

Answers (1)

Mamun
Mamun

Reputation: 68933

You can wrap the radio buttons inside separate div container.

Then you can use $('#Div1 :radio:checked') and $('#Div2 :radio:checked') to target the checked radio buttons. finally use map to get the value.

You can try the following way:

$('#Div1 :radio').each(function(){
  var cls = $(this).attr('name');
  var ck = $(this).attr('checked');
  if(ck != 'checked'){
    $(`#Div2 [name=${cls}]`).attr('checked', true);
  }
});

$('#Div2 :radio').click(function(){
  var cls = $(this).attr('class');
  var ck = $(this).attr('checked');
  if(ck != 'checked'){
    $(`#Div1 [name=${cls}]`).attr('checked', true);
  }
  var checkedDiv1 = $('#Div1 :radio:checked').map((i,el) => $(el).attr('value')).get().join(',');
  $('#1').val(checkedDiv1);
  var checkedDiv2 = $('#Div2 :radio:checked').map((i,el) => $(el).attr('value')).get().join(',');;
  $('#2').val(checkedDiv2);
});

$('#Div1 :radio').click(function(){
  var cls = $(this).attr('class');
  var ck = $(this).attr('checked');
  if(ck != 'checked'){
    $(`#Div2 [name=${cls}]`).attr('checked', true);
  }
   var checkedDiv1 = $('#Div1 :radio:checked').map((i,el) => $(el).attr('value')).get().join(',');
  $('#1').val(checkedDiv1);
  var checkedDiv2 = $('#Div2 :radio:checked').map((i,el) => $(el).attr('value')).get().join(',');;
  $('#2').val(checkedDiv2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- ADDRESS 1  -->
<div id="Div1">
  <input type="radio" id="11" name="addressname1" value="address1" checked> 
  <label for="11">address1</label>

  <input type="radio" id="12" name="addressname2" value="address2"> 
  <label for="12">address2</label>

  <input type="radio" id="13" name="addressname3" value="address3" > 
  <label for="13">address3</label>
</div>
<!-- END ADDRESS 1 -->
<br>
<input type="text" id="1" value="" placeholder="result of address 1 here">
<br>
<br>
<!-- ADDRESS 2  -->
<div id="Div2">
  <input type="radio" id="21" name="addressname1" value="address1" > 
  <label for="21">address1</label>

  <input type="radio" id="22" name="addressname2" value="address2" checked> 
  <label for="22">address2</label>

  <input type="radio" id="23" name="addressname3" value="address3" checked>   
  <label for="23">address3</label> 
<div>
<!-- END ADDRESS 2 -->

 <br>
<input type="text" id="2" value="" placeholder="result of address 2 here">

Upvotes: 1

Related Questions