Question

我已经找到了如何单击单选按钮如何检查我的页面上的复选框，但是这会选中复选框的ID。我的页面上的复选框是动态生成的，最后是id号。

<input type="checkbox" certificate="false" id="gridcb0" siteid="23445" value="72278" class="custom selector"> 
Option One<br />

<input type="checkbox" certificate="false" id="gridcb1" siteid="23445" value="72278" class="custom selector"> 
Option Two<br />

<input type="checkbox" certificate="false" id="gridcb2" siteid="23445" value="72278" class="custom selector"> 
Option Three<br />

<input type="checkbox" certificate="false" id="gridcb3" siteid="23445" value="72278" class="custom selector"> 
Option Four<br />

<input type="checkbox" certificate="false" id="gridcb4" siteid="23445" value="72278" class="custom selector"> 
Option Five<br />   

<input type="radio" id="op5" value="1" name="options2" class="custom">
Select All

正如您所看到的ID为gridcb0到gridcb5，但最终的数字可能会持续数百个。

这是我的JS

jQuery('#op5').click(function(){      
    jQuery('#gridcb0').attr('checked', true);   
});

目前这只会选择顶部复选框，如何更改此JS以便循环检查所有必需的复选框？

Answer 1

你可以尝试使用类似下面代码的选择元素：

jQuery('#op5').click(function(){      
    jQuery('input[type="checkbox"]').prop('checked', true);   
 });

有帮助： .prop()

Answer 2

他们都共享一个共同的类，所以你可以选择那个并且不需要循环它们：

jQuery('#op5').click(function(){      
    jQuery('.custom.selector').attr('checked', true);   
});

你甚至可以添加另一个语义类来用作此目的的选择器。

Answer 3

使用此jQuery代码：

jQuery('#op5').click(function(){      
    $(".custom").attr("checked","checked");
 });

Answer 4

你可以这样做。

jQuery('#op5').click(function(){      
jQuery('input[type="checkbox"]').prop('checked', true);});

Answer 5

以下代码可以正常使用。

<script src="~/Scripts/jquery-1.8.2.js"></script>
<input type="checkbox" certificate="false" id="gridcb0" siteid="23445" value="72278" class="custom-selector"> Option One
<br />
<input type="checkbox" certificate="false" id="gridcb1" siteid="23445" value="72278" class="custom-selector"> Option Two
<br />
<input type="checkbox" certificate="false" id="gridcb2" siteid="23445" value="72278" class="custom-selector"> Option Three
<br />
<input type="checkbox" certificate="false" id="gridcb3" siteid="23445" value="72278" class="custom-selector"> Option Four
<br />
<input type="checkbox" certificate="false" id="gridcb4" siteid="23445" value="72278" class="custom-selector"> Option Five
<br />
<input type="radio" id="op5" value="1" name="options2" class="custom">Select All

<script>
    $(document).ready(function () {
        $(".custom").change(function () {
               $(".custom").parent().find(".custom-selector").prop("checked", true);
        })
    });

</script>

我刚刚更改了您的复选框＆＃39;上课

定制选择器

Answer 6

你可以尝试

jQuery('#op5').click(function(){      
    jQuery('input[type="checkbox"]').attr('checked', true);   
});

要获得更多控制权，您可以将复选框包装在单独的div中。

Answer 7

您需要使用适用于所有复选框的类，或者您可以按元素定位它们，例如：

jQuery('#op5').click(function(){      
    jQuery('input[type=checkbox]').attr('checked', true);   
 });

JSFIDDLE http://jsfiddle.net/a_incarnati/ckr7r0fm/1/

Answer 8

jQuery('#op5').click(function(){
    jQuery('.selector').prop('checked', true);
 });
jQuery('.selector').change(function(){
     jQuery('#op5').prop('checked',
        jQuery('.selector:checked').length == jQuery('.selector').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" certificate="false" id="gridcb0" siteid="23445" value="72278" class="custom selector"> Option One
    <br />
<input type="checkbox" certificate="false" id="gridcb1" siteid="23445" value="72278" class="custom selector"> Option Two
        <br />
<input type="checkbox" certificate="false" id="gridcb2" siteid="23445" value="72278" class="custom selector"> Option Three
        <br />
<input type="checkbox" certificate="false" id="gridcb3" siteid="23445" value="72278" class="custom selector"> Option Four
        <br />
<input type="checkbox" certificate="false" id="gridcb4" siteid="23445" value="72278" class="custom selector"> Option Five    
    <br />    
<input type="radio" id="op5" value="1" name="options2" class="custom">Select All

Answer 9

如果您将代码更改为

jQuery('#op5').click(function(){      
    jQuery(':checkbox').attr('checked', true);   
 });

它应该做的伎俩。

 jQuery(':checkbox')

只是

的简写

 jQuery('input[type=checkbox]')

单击单选按钮选中所有复选框

9 个答案: