checkboxlist in asp.net C#

Question

anisha.silva 0 Posting Whiz in Training

11 Years Ago

Hi what i want to do is to code a checkbox list. herewith i have attached an imaage.
as in the image, if i check business all the checkboxes below it should get checked and if i uncheck all the check box should get unchecked,
how do i code this in asp.net C#

thanks

asp.net

Edited 11 Years Ago by anisha.silva because: a

5 Contributors
27 Replies
2K Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by prashant9928

All 27 Replies

JorgeM 958 Problem Solver

11 Years Ago

This is jQuery. You can add this code at the bottom of your .aspx page just before the closing </body> tag within a set of <script> tags. However, if you include jQuery, you need to reference the jQuery library, typically in your <head> element, just before the closing </head> tag.

Are you familiar with jQuery?

Otherwise you can do this using asp.net c#, but without some form of JavaScript, you'll have to deal with the postbacks.

Edited 11 Years Ago by JorgeM

BMXDad 23 Newbie Poster

11 Years Ago

Sorry ... what I sent is for a button click. This works like you want I think.
http://jsfiddle.net/GBL4s/1/

<label for="business">
    <input type="checkbox" id="business">Business</label>
<div id="businesslist">
    <ul style="list-style: none;">
        <li>
            <label for="chk1">
                <input type="checkbox" name="chk1" id="chk1" class="sub" />First</label>
        </li>
        <li>
            <label for="chk2">
                <input type="checkbox" name="chk2" id="chk2" class="sub" />Second</label>
        </li>
        <li>
            <label for="chk3">
                <input type="checkbox" name="chk3" id="chk3" class="sub" />Third</label>
        </li>
        <li>
            <label for="chk4">
                <input type="checkbox" name="chk4" id="chk4" class="sub" />Fourth</label>
        </li>
        <li>
            <label for="chk5">
                <input type="checkbox" name="chk5" id="chk5" class="sub" />Fifth</label>
        </li>
        <li>
            <label for="chk6">
                <input type="checkbox" name="chk6" id="chk6" class="sub" />Sixth</label>
        </li>
        <li>
            <label for="chk7">
                <input type="checkbox" name="chk7" id="chk7" class="sub" />Seventh</label>
        </li>
    </ul>
</div>




$('#business:checkbox').change(function () {
    if ($('#business:checkbox').attr("checked")) $('.sub').attr('checked', 'checked');
    else $('.sub').removeAttr('checked');
});

Edited 11 Years Ago by BMXDad

BMXDad 23 Newbie Poster

11 Years Ago

Add this just under the closing form tag, line 105

 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

hometownnerd 13 Newbie Poster

11 Years Ago

You could add this below the checking function so you would end up with this in the sript function...

$('#business:checkbox').change(function () {
    if ($('#business:checkbox').attr("checked")) $('.sub').attr('checked', 'checked');
    else $('.sub').removeAttr('checked');
});
$('.sub:checkbox').change(function () {
    var $b = $('.sub:checkbox');
    var cnt = $b.filter(':not(:checked)').length; 

    if(cnt==0){
      $('#business').attr('checked', 'checked');

    }else{
      $('#business').removeAttr('checked');
    }

});

Also added the ability to check business if all are manually selected.

That worked for me.
Hope that helps you
Larry

Edited 11 Years Ago by hometownnerd because: code that actually works now....sorry

hometownnerd 13 Newbie Poster

11 Years Ago

Ok, figured it out....had to reference a different way. Here ya go....

 <script type="text/javascript">
            $(document).ready(function () {
                jQuery('.main').change(function () {

                    if (jQuery('.main :checkbox').attr("checked")) {
                        jQuery('.sub :checkbox').attr('checked', true);
                    } else {
                        jQuery('.sub :checkbox').removeAttr('checked');
                    }
                });
                jQuery('.sub').change(function () {
                    var b = jQuery('.sub :checkbox');
                    var cnt = b.filter(':not(:checked)').length;
                    if (cnt == 0) {
                        jQuery('.main :checkbox').attr('checked', 'checked');
                    } else {
                        jQuery('.main :checkbox').removeAttr('checked');
                    }
                });
            });
</script>

Hopefully that does what you are looking for. Let me know,
Larry

Edited 11 Years Ago by hometownnerd because: fixed code

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anisha.silva 0 Posting Whiz in Training · Answer 1 · 2013-02-08T03:19:05+00:00

anisha.silva 0 Posting Whiz in Training

11 Years Ago

BMXDad 23 Newbie Poster · Answer 2 · 2013-02-12T15:18:40+00:00

It would be easier to do it in jQuery.

$(function () {
    $('#business').toggle(
        function() {
            $('#businesslist .subb').prop('checked', true);
        },
        function() {
            $('#businesslist .sub').prop('checked', false);
        }
    );
});

anisha.silva 0 Posting Whiz in Training · Answer 3 · 2013-02-12T20:36:12+00:00

do i write this in a .cs file
where do i add this code?

anisha.silva 0 Posting Whiz in Training · Answer 4 · 2013-02-13T01:50:19+00:00

i added the script code before the ending body tag

it didnt work can you tell me how can i fix it
thanks

anisha.silva 0 Posting Whiz in Training · Answer 5 · 2013-02-14T05:21:45+00:00

hmm dosen't work for me
the link that is posted is working fine

but when i cpoy it to mycaode does not work

i added the jQuery in script tabe before the closing tag of the body, didn't work

and also if i check the business checkbox and then uncheck each sub ietm one by one the business check box should uncheck too. how do i make this change also?

appreciate a reply.

BMXDad 23 Newbie Poster · Answer 6 · 2013-02-14T15:13:34+00:00

Post the full html ... minus any content of course.

anisha.silva 0 Posting Whiz in Training · Answer 7 · 2013-02-14T18:40:27+00:00

the code is at the bottom

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdvancedSearch.aspx.cs" Inherits="AdvancedSearch" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 205px;
        }

        .auto-style2 {
            width: 152px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <strong>Advanced Search
            </strong>
            <br />
            <br />
            Select Database to Search
            <asp:CheckBoxList ID="chblAll" runat="server">
                <asp:ListItem>All</asp:ListItem>
            </asp:CheckBoxList>
            <asp:CheckBoxList ID="chblBookshare" runat="server">
                <asp:ListItem>BookShare</asp:ListItem>
            </asp:CheckBoxList>
            <asp:CheckBoxList ID="chblIsbn" runat="server">
                <asp:ListItem>isbndb.com</asp:ListItem>
            </asp:CheckBoxList>
            <asp:CheckBoxList ID="chblWorldcat" runat="server">
                <asp:ListItem>WorldCat.org</asp:ListItem>
            </asp:CheckBoxList>
        </div>
        &nbsp;
        <div>
            <table>

                <tr>
                    <td>
                        <asp:DropDownList ID="DropDownList3" runat="server" Width="203px">
                            <asp:ListItem>Author</asp:ListItem>
                            <asp:ListItem>Subject</asp:ListItem>
                             <asp:ListItem Selected="True">Key Word</asp:ListItem>
                            <asp:ListItem>Title</asp:ListItem>
                        </asp:DropDownList></td>
                    <td>
                        <asp:TextBox ID="TextBox3" runat="server" Width="192px"></asp:TextBox></td>
                </tr>

                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                 <tr>
                    <td>
                        <asp:DropDownList ID="DropDownList4" runat="server" Width="203px">
                            <asp:ListItem>Author</asp:ListItem>
                            <asp:ListItem>Subject</asp:ListItem>
                             <asp:ListItem>Key Word</asp:ListItem>
                            <asp:ListItem Selected="True">Title</asp:ListItem>
                        </asp:DropDownList></td>
                    <td>
                        <asp:TextBox ID="TextBox4" runat="server" Width="192px"></asp:TextBox></td>
                </tr>
            </table>

        </div>

        &nbsp;<div>
            <asp:Button ID="Button1" runat="server" Text="Search" />
             &nbsp;
              <asp:Button ID="Button2" runat="server" Text="Clear" />
              </div>


        <div>
      <label for="business">
          <input type="checkbox" id="business">Business</label>
<div id="businesslist">
    <ul style="list-style: none;">
        <li>
            <label for="chk1">
                <input type="checkbox" name="chk1" id="chk1" class="sub" />First</label>
        </li>
        <li>
            <label for="chk2">
                <input type="checkbox" name="chk2" id="chk2" class="sub" />Second</label>
        </li>
        <li>
            <label for="chk3">
                <input type="checkbox" name="chk3" id="chk3" class="sub" />Third</label>
        </li>      
    </ul>
</div>


</div>

    </form>

    <script>
    $('#business:checkbox').change(function () {
    if ($('#business:checkbox').attr("checked")) $('.sub').attr('checked', 'checked');
    else $('.sub').removeAttr('checked'); });
    </script>

</body>
</html>

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 8 · 2013-02-14T20:09:16+00:00

I would suggest placing the reference to jQuery just before the closing </head> element. This will ensure that if any other jQuery code is added on this page, the jQuery library would already be loaded...and most likely the visitor would have already visited a site that is referencing this library so, the browser will load it from cache.

Another technique that is common is to wrap the jQuery block within a ready method.

http://api.jquery.com/ready/

BMXDad 23 Newbie Poster · Answer 9 · 2013-02-14T20:44:44+00:00

Having the reference at the bottom will allow the page to render completely, before running any scripts that might need running. If I remember correctly, the page will stop rendering, if it encounters a script reference, to only continue when its been cached or ready to use. Something to think about when you have a script heavy page.

But for normal pages top or bottom will work fine.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 10 · 2013-02-14T21:51:06+00:00

@ggamble- I agree with your suggestion. I generally add scripts down just before the closing </body> tag. However, I generally add the reference to jQuery in the <head> section. I'll do some additional reading based upon your explanation. thanks!

anisha.silva 0 Posting Whiz in Training · Answer 11 · 2013-02-14T23:47:40+00:00

how do i get the business to uncheck when one of the sub is unchecked and to get business checked when all the subs are checked

anisha.silva 0 Posting Whiz in Training · Answer 12 · 2013-02-15T16:19:43+00:00

anisha.silva 0 Posting Whiz in Training

11 Years Ago

yes solved thanks

anisha.silva 0 Posting Whiz in Training · Answer 13 · 2013-02-16T14:29:58+00:00

hi

when i put the checkboxes in asp tages the jQuery does not work
please guide me in this
appreciate it

thanks

anisha.silva 0 Posting Whiz in Training · Answer 14 · 2013-02-16T16:33:05+00:00

hi
i added the code to a web page. The code is below

 <div>
            <label for="All" >
                <asp:CheckBox ID="CheckBox4" runat="server" />All</label>
            &nbsp;
            <div id="sourcelist">
                <ul style="list-style: none;">
                    <li>
                        <label for="chk1">

                        <asp:CheckBox ID="CheckBox1"  runat="server"/>BookShare</label>
                    </li>
                    <li>
                        <label for="chk2">
                            <asp:CheckBox ID="CheckBox2" runat="server" />Isbndb</label>
                    </li>
                    <li>
                        <label for="chk3">
                            <asp:CheckBox ID="CheckBox3" runat="server" />WordCat.org</label>
                    </li>
                </ul>
            </div>
        </div>

The JQuery is not working anymore, i added the above code so that i can get the checkbox value for processing

how do i solve this ?

thanks

hometownnerd 13 Newbie Poster · Answer 15 · 2013-02-16T17:21:33+00:00

More than likely it is because the checkboxes do not have the class associated with it via the cssclass="sub" tag. You also need to give the All checkbox a class and instead of referencing the business checkbox via the #business way you would need to reference it via the class name with a period.

<div>
            <label for="All" >
                <asp:CheckBox ID="CheckBox4" runat="server" cssclass="main" />All</label>
            &nbsp;
            <div id="sourcelist">
                <ul style="list-style: none;">
                    <li>
                        <label for="chk1">
                        <asp:CheckBox ID="CheckBox1"  runat="server" cssclass="sub"/>BookShare</label>
                    </li>
                    <li>
                        <label for="chk2">
                            <asp:CheckBox ID="CheckBox2" runat="server" cssclass="sub" />Isbndb</label>
                    </li>
                    <li>
                        <label for="chk3">
                            <asp:CheckBox ID="CheckBox3" runat="server" cssclass="sub" />WordCat.org</label>
                    </li>
                </ul>
            </div>
        </div>
        <script>
        $('.main:checkbox').change(function () {
    if ($('.main:checkbox').attr("checked")) $('.sub').attr('checked', 'checked');
    else $('.sub').removeAttr('checked');
});
$('.sub:checkbox').change(function () {
    var $b = $('.sub:checkbox');
    var cnt = $b.filter(':not(:checked)').length; 
    if(cnt==0){
      $('.main').attr('checked', 'checked');
    }else{
      $('.main').removeAttr('checked');
    }
});
</script>

Maybe that will work for you,
Let me know,
Larry

hometownnerd 13 Newbie Poster · Answer 16 · 2013-02-16T17:22:57+00:00

You would need to be careful with using IDs in jQuery with .net since .net changes the ID of all runat="server" controls to a really long name instead of what you would expect, which is why you cannot use the # sign very easily.

Larry

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 17 · 2013-02-16T18:34:50+00:00

I think the problem is that you have posted several variations of your code an have changed the IDs for your elements. For JavaScript/jQuery to work, the IDs and classes that are used in your script must match your elements.

anisha.silva 0 Posting Whiz in Training · Answer 18 · 2013-02-20T15:32:12+00:00

hi larry

the jquery does not work for the checkboxes inside the asp tag. But i am able to get the checkbox value (true false) from the .cs file

appreciate a reply
thanks

hometownnerd 13 Newbie Poster · Answer 19 · 2013-02-20T16:41:31+00:00

Can you post your code that you are using....including the jquery and the checkboxes? Want to make sure I am not messing something up.

thanks

anisha.silva 0 Posting Whiz in Training · Answer 20 · 2013-02-20T17:08:57+00:00

hi Larry

i tryed the code you posed above. the jquery does not work, but i am able to get the checkbox value (true false) to the .cs file
thank

appreciate a reply

anisha.silva 0 Posting Whiz in Training · Answer 21 · 2013-02-21T01:21:44+00:00

anisha.silva 0 Posting Whiz in Training

11 Years Ago

will try it

Edited 11 Years Ago by anisha.silva because: change

prashant9928 0 Newbie Poster · Answer 22 · 2013-02-21T05:11:59+00:00

Please try telerik control. Visit the following link and use that telerik control as i am using these a lot.
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx

checkboxlist in asp.net C#

Recommended Answers Collapse Answers

All 27 Replies

Recommended Answers