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

Question

我和我的朋友正试图解决这个问题。我们想要获取在 div 中选中的单选按钮的所有值第一部分名称 = 已检查无线电 1名称 = 未选中的无线电 2名称 = 已检查的无线电 3二级名称 = 未选中的无线电 1（已选中 div1 中的 cuz）名称 = 未选中的无线电 2名称 = 未选中的无线电 3（与无线电 1 相同）所以场景是，当我点击div2无线电3时，将取消选中div1无线电3，并检查div2无线电3。我想打印每个 div 检查的所有值网页：<!-- 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">

Answer 1

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

然后，您可以使用 和 来定位选中的单选按钮。最后使用地图获取值。$('#Div1 :radio:checked')$('#Div2 :radio:checked')

您可以尝试以下方法：

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