CODEWITHSUNDEEP
jqueryasp.netwebforms
Litash
Litash

Reputation: 182

Count the number of checkboxlist and if checked items more than 1, check another checkbox?

I have a checkboxlist control on my webform page in asp.net like following code:

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

this code is parsed into HTML by asp.net:

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

and another checkbox:

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

I want to whether the number of selected items in CheckBoxlist1 is more than 1, if yes, the CheckBox1 will be auto checked. I would like to achieve this using jQuery.

Upvotes: 0

Views: 9856

Answers (5)

Umesh Sehta
Umesh Sehta

Reputation: 10683

Try this

Assume a variable, initialized with 0.then foreach loop for all checked checkbox and add into variable. after that check if variable value greater than 1 then checked the another checkbox.

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

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

Upvotes: 0

Amit
Amit

Reputation: 15387

Try this

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

Updated

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

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try it like,

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

Upvotes: 1

nerdybeardo
nerdybeardo

Reputation: 4675

You should change your id so that you're using a static id so that ASP.NET doesn't change your id when it renders.

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

Note This will also uncheck the single check box if there are no items selected. If you want to keep it checked after it has been already checked at least once then you must do the following

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

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122008

try 

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

    //check that
}

Upvotes: 0

Related Questions