Select 单击单选按钮时的所有复选框

Question

我已经弄清楚了如何单击单选按钮如何选中我页面上的复选框，但是这个 selects 在复选框的 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);   
});

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

Answer 1

它们都有一个共同点 class，因此您可以 select 这样就不需要循环遍历它们了：

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

您甚至可以添加另一个更具语义的 class 作为 selector 用于此目的。

Answer 2

您可以尝试使用 select 元素，类型如下代码：

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

有帮助： .prop()

Answer 3

你可以试试

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

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

Answer 4

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

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

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

Answer 5

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 6

如果您将代码更改为

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

它应该可以解决问题。

 jQuery(':checkbox')

只是 shorthand 的

 jQuery('input[type=checkbox]')

Answer 7

使用此 jQuery 代码：

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

Answer 8

你可以像下面那样做。

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

Answer 9

以下代码工作正常。

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

我刚刚将您的复选框的 class 更改为

custom-selector

Select 单击单选按钮时的所有复选框

Select all checkboxes on click of radio button

html

javascript

checkbox

jquery