我和我的朋友正在努力解决这个问题。 我们希望获取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
有人能有个主意吗?
您可以将单选按钮包装在单独的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">