0

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

Edited by anisha.silva: a

5
Contributors
27
Replies
102
Views
4 Years
Discussion Span
Last Post by prashant9928
Featured Replies
  • 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. … Read More

  • 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 … Read More

  • Add this just under the closing form tag, line 105 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> Read More

  • 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 … Read More

  • 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) … Read More

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

Edited by JorgeM

0

i added the script code before the ending body tag

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

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

Edited by ggamble

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.

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

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

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.

Edited by ggamble: spelling

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!

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

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

Edited by hometownnerd: code that actually works now....sorry

0

hi

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

thanks

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

0

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

0

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

0

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.

0

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

0

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

0

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

1

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 by hometownnerd: fixed code

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.