计算复选框列表的数量,如果选中的项目超过1,请选中另一个复选框?

时间:2013-08-12 07:50:53

标签: jquery asp.net webforms

我在asp.net的webform页面上有一个checkboxlist控件,如下面的代码:

<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="cbxlMulti">
    <asp:ListItem Value="AAAA">AAAA</asp:ListItem>
    <asp:ListItem Value="BBBB">BBBB</asp:ListItem>
    <asp:ListItem Value="CCCC">CCCC</asp:ListItem>
</asp:CheckBoxList>
</div>

这个代码由asp.net解析为HTML:

<div>
<table id="ContentPlaceHolder1_CheckBoxList1" class="cbxlMulti">
  <tbody>
    <tr>
      <td>
        <input id="ContentPlaceHolder1_CheckBoxList1_0" type="checkbox" name="ct100$ContentPlaceHolder1$CheckBoxList1$0" value="AAAA">
        <label for="ContentPlaceHolder1_CheckBoxList1_0">AAAA</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="ContentPlaceHolder1_CheckBoxList1_1" type="checkbox" name="ct100$ContentPlaceHolder1$CheckBoxList1$1" value="BBBB">
        <label for="ContentPlaceHolder1_CheckBoxList1_1">BBBB</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="ContentPlaceHolder1_CheckBoxList1_2" type="checkbox" name="ct100$ContentPlaceHolder1$CheckBoxList1$2" value="BBBB">
        <label for="ContentPlaceHolder1_CheckBoxList1_2">BBBB</label>
      </td>
    </tr>

和另一个复选框:

<div>
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="cbxSingle" Text="XXXX" />
</div>

我想知道CheckBoxlist1中所选项目的数量是否大于1,如果是,则自动检查CheckBox1。我想用jQuery实现这一点,但我是jQuery的新手。有人可以给我一些示例代码吗?

提前致谢。

5 个答案:

答案 0 :(得分:1)

试试这个

if($('#CheckBoxList1 :checkbox:checked').length > 0){
    $('#CheckBox1').attr('checked','checked');
   //OR
    $('#CheckBox1').prop('checked', true);
   }

更新

$(function(){
    $("input[type=checkbox]").click(function () {
      var a= $("input[id^='ContentPlaceHolder1_CheckBoxList1']:checkbox:checked");

      if($(a).length > 0){
        $('#CheckBox1').attr('checked','checked');           
       }
      else
        $('#CheckBox1').removeAttr('checked');
    });
});

Demo

答案 1 :(得分:1)

试试吧,

$(function(){
    if ($('.cbxlMulti').find(':checkbox:checked').length > 1){
         $('.cbxSingle:checkbox').prop('checked',true);
    }
});

答案 2 :(得分:1)

试试这个

假设一个变量,使用0.then foreach循环初始化所有选中的复选框和     加入变量。之后检查变量值是否大于1然后检查     另一个复选框。

var count=0;
$('#ContentPlaceHolder1_CheckBoxList1 input:checkbox:checked').each(function () {
count=count+1;
});

if(count>1)
{
$('#CheckBox1').attr('checked');
}

答案 3 :(得分:0)

尝试

if ($('#CheckBoxList1 :checkbox:checked').length > 0){

    //check that
}

答案 4 :(得分:0)

您应该更改您的ID,以便您使用静态ID,以便ASP.NET在呈现时不会更改您的ID。

<div>
    <asp:CheckBox ID="singleCheckBox" runat="server" CssClass="cbxSingle" ClientIDMode="Static" Text="XXXX" />
</div>

<script type="text/javascript">
    $('.cbxlMulti input[type=checkbox]').change(function () {
        $('#singleCheckBox').prop('checked', $('.cbxlMulti input[type=checkbox]:checked').length > 0);
    });
</script>

注意如果没有选择任何项目,也会取消选中此复选框。如果您想在已经检查过至少一次之后检查它,那么您必须执行以下操作

<script type="text/javascript">
    $('.cbxlMulti input[type=checkbox]').change(function () {
        $('#singleCheckBox').prop('checked', $('#singleCheckBox').is(':checked') || $('.cbxlMulti input[type=checkbox]:checked').length > 0);
    });
</script>