checkboxlist in asp.net C#

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

Attachments

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

It would be easier to do it in jQuery.

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

Junior Poster in Training

50 posts since Mar 2006

Reputation Points: 11

Solved Threads: 5

Skill Endorsements: 2

0

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

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1

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.

JorgeM

Industrious Poster

4,023 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

0

i added the script code before the ending body tag

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

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1

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');
});

Junior Poster in Training

50 posts since Mar 2006

Reputation Points: 11

Solved Threads: 5

Skill Endorsements: 2

0

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.

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

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

Junior Poster in Training

50 posts since Mar 2006

Reputation Points: 11

Solved Threads: 5

Skill Endorsements: 2

0

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>

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1

Add this just under the closing form tag, line 105

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

Junior Poster in Training

50 posts since Mar 2006

Reputation Points: 11

Solved Threads: 5

Skill Endorsements: 2

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

0

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.

JorgeM

Industrious Poster

4,023 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

0

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.

Junior Poster in Training

50 posts since Mar 2006

Reputation Points: 11

Solved Threads: 5

Skill Endorsements: 2

0

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

JorgeM

Industrious Poster

4,023 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

0

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

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1

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

hometownnerd

Light Poster

37 posts since Sep 2007

Reputation Points: 21

Solved Threads: 4

Skill Endorsements: 2

0

yes solved thanks

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

hi

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

thanks

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

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

Posting Whiz in Training

227 posts since May 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0