如何在jQuery中检查多个单独的单选按钮?

时间:2014-04-10 05:44:52

标签: jquery html

在我的页面中有这么多群组单选按钮就是这样的。

第一个div“Request-1”仅默认选中。单击按钮后我调用下面的jQuery函数将所选值分配给其他div单选按钮。

if ($("#Request-1:input:checked").length > 0) {

            $("#Request-2").attr('checked', 'checked');
            $("#Request-3").attr('checked', 'checked');
            $("#Request-4").attr('checked', 'checked');
        }
        else if ($("#DRequest-1:input:checked").length > 0) {
            $("#DRequest-2").attr('checked', 'checked');
            $("#DRequest-3").attr('checked', 'checked');
            $("#DRequest-4").attr('checked', 'checked');

        }

但只有#Request-4检查其他单选按钮没有检查。请告诉我如何检查所有单选按钮。

 <div id="choose-1">
<input id="Request-1"  type="radio" name="request-type"  checked="checked"/>Data REquest



     <input id="DRequest-1"  type="radio" name="request-type"/>D Request Data
    </div>
 <div id="choose-2">
    <input id="Request-2"  type="radio" name="request-type" />Data REquest

      <input id="DRequest-2"  type="radio" name="request-type"/>D Request Data
    </div>
 <div id="choose-3">
    <input id="Request-3"  type="radio" name="request-type" />Data REquest

      <input id="DRequest-13"  type="radio" name="request-type"/>D Request Data
    </div>
 <div id="choose-4">
    <input id="Request-4"  type="radio" name="request-type"  checked="checked"/>Data REquest

      <input id="DRequest-4"  type="radio" name="request-type"/>D Request Data
    </div>

1 个答案:

答案 0 :(得分:2)

您使用的是radio buttons且它们位于同一个group request-type中,因此在这种情况下只能选择一个

要开始工作,您需要使用checkboxes取代radios

然后尝试使用prop()并合并所有由,分隔的选择器

if ($("#Request-1:checked").length > 0) {
   $("#Request-2, #Request-3, #Request-4").prop('checked', true);
}
else if ($("#DRequest-1:checked").length > 0) {
   $("#DRequest-2, #DRequest-3, #DRequest-4").prop('checked', true);
}

Live Demo

如果您需要在更改状态时切换复选框,请尝试使用

$('#Request-1').on('change',function(){
    $("#Request-2, #Request-3, #Request-4").prop('checked', this.checked);    
}).change();
$('#DRequest-1').on('change',function(){
    $("#DRequest-2, #DRequest-3, #DRequest-4").prop('checked', this.checked);    
}).change();

复选框 change demo

再次,您需要使用无线电,然后您需要更改分组的单选按钮,

<div id="choose-1">
    <input id="Request-1" type="radio" name="request-type" checked="checked" />Data REquest
    <input id="DRequest-1" type="radio" name="request-type" />D Request Data</div>
<div id="choose-2">
    <input id="Request-2" type="radio" name="request-type-2" />Data REquest
    <input id="DRequest-2" type="radio" name="request-type-2" />D Request Data</div>
<div id="choose-3">
    <input id="Request-3" type="radio" name="request-type-3" />Data REquest
    <input id="DRequest-3" type="radio" name="request-type-3" />D Request Data</div>
<div id="choose-4">
    <input id="Request-4" type="radio" name="request-type-4" />Data REquest
    <input id="DRequest-4" type="radio" name="request-type-4" />D Request Data
</div>

广播 change demo