提问者:小点点

获取在特定div中选中的单选按钮的所有值


我和我的朋友正在努力解决这个问题。 我们希望获取div中选中的单选按钮的所有值

DIV1

名称=Radio1已选中

name=radio2未选中

名称=Radio3已检查

Div2

name=radio1未选中(因为在div1中它已选中)

NAME=radio2未选中

name=Radio3未选中(与radio1相同)

因此,当我单击div2 radio3时,div1 radio3将被取消选中,而div2 radio3将被选中。 我想打印每个div检查的所有值

HTML:

null

<!-- 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">

null

有人能有个主意吗?


共1个答案

匿名用户

您可以将单选按钮包装在单独的div容器中。

然后,可以使用$('#div1:radio:checked')$('#div2:radio:checked')将选中的单选按钮作为目标。 最后使用map获取值。

您可以尝试以下方式:

null

$('#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">