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

Select all checkboxes on click of radio button

本文关键字：复选框 单选按钮 单击      更新时间：2023-09-26

我已经计算出如何在单击单选按钮时选中页面上的复选框，但这会在复选框的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，以便我循环通过并选中所有必需的复选框？

您可以尝试选择类型如下的元素：

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

有用：.prp（）

它们都共享一个公共类，因此您可以通过它进行选择，并消除在它们之间循环的需要：

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

为此，您甚至可以添加另一个更具语义的类作为选择器。

使用此jQuery代码：

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

您可以执行以下操作。

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

以下代码运行良好。

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

我刚把你的复选框类改成

自定义选择器

您可以尝试

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

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

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

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

JSFIDDLEhttp://jsfiddle.net/a_incarnati/ckr7r0fm/1/

如果您将代码更改为

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

它应该起作用。

 jQuery(':checkbox')

只是的简写

 jQuery('input[type=checkbox]')


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

相关文章：