How to Check All ASP CheckBoxList items using javascript/jQuery

Question

Can you please help me.

I have an ASP RadioButtonList with two list items; Select All and UnSelect All.

Radio Button List to select all or unselect all

I also have an ASP CheckBoxList that is database bound. I need to check all items on the check box when the Select All button is selected and unselect all if the Unselect All is selected.

I am using javascript.

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

        var select = $(".radio-set").find("input:checked").val();

        $('#<%=rdSelectContractor.ClientID %>').change(function () {

            if (select = "0") {

                $('.check_set_contractor').each(function () {

                    $(this).closest('table').find('input[type=checkbox]').prop('checked', true);
                });
            }

            else if (select = "1") {

                $('.check_set_contractor').each(function () {

                    $(this).closest('table').find('input[type=checkbox]').prop('checked', false);
                });
            }

        });
    });
</script>

My RadioButtonList

<asp:RadioButtonList ID="rdSelectContractor" runat="server" CssClass="radio-set">
          <asp:ListItem Value="0">Select All</asp:ListItem>
          <asp:ListItem Value="1">UnSelect All</asp:ListItem>
      </asp:RadioButtonList>

My CheckBoxList

<asp:CheckBoxList ID="ContractorId" runat="server" RepeatDirection="Horizontal" RepeatColumns="6" CssClass="check_set_contractor"></asp:CheckBoxList>

Thank you so much

You missed "==" in your code and used "=".

Hemal
– Hemal

2015-12-21 11:51:13 +00:00
Commented Dec 21, 2015 at 11:51 — Hemal
– Hemal, Commented Dec 21, 2015 at 11:51

Natalie Hedström · Accepted Answer · 2015-12-21 12:18:23Z

1

First of all you need to handle change event of your radio button like below :

$(document).ready(function() {
  $('input[name="rdSelectContractor"]').change(function() {
    var selectedValue = $(this).val();
    var allCheckBoxes = $('.check_set_contractor');
    if (selectedValue == 0) {
      allCheckBoxes.prop("checked", true);
    } else if (selectedValue == 1) {
      allCheckBoxes.prop("checked", false);
    }
  });
});

edited Dec 21, 2015 at 12:18

Natalie Hedström

2,6293 gold badges27 silver badges38 bronze badges

answered Dec 21, 2015 at 11:43

jbhanderi

535 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

182764125216 Over a year ago

What about allCheckBoxes.prop("checked", selectedValue == 0); instead of the if/else if?

Rahul Singh · Accepted Answer · 2015-12-21 07:43:28Z

I see few issues with your code, you are relying on .radio-set class which asp.net server control renders as html applies to the html table, this may produce unexpected results. Next, you are looping through the table which is wrappend around your checkboxlist.

Instead you can do it like this:-

$(document).ready(function () {
    $('input[name="rdSelectContractor"]').change(function () {
        var selectedValue = $(this).val();
        var ContractorIdCheckbox = $('input[name^="ContractorId"]');
        if (selectedValue == 0) {
             ContractorIdCheckbox.prop("checked", true);
        }
        else if (selectedValue == 1) {
             ContractorIdCheckbox.prop("checked", false);
        }
     });
});

Hemal · Accepted Answer · 2015-12-21 12:07:03Z

0

I think basic structure of your code is little messy.

Also you forgot to add COMPARISION OPERATOR '==' and used '='

Also you need to check for true/false if radio button is checked/unchecked, not needed its value, so dont use .val()

Based on your problem, I have provided a fiddle that is working according to your need.

Because of unavailability of ASP.NET controls on jsfiddle, I have assumed sample controls, but you can easily change IDs and classes as per your ASP.NET requirements.

You can make it short and sweet as per my fiddle.

FIDDLE

answered Dec 21, 2015 at 12:07

Hemal

3,7722 gold badges27 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to Check All ASP CheckBoxList items using javascript/jQuery

My RadioButtonList

My CheckBoxList

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My RadioButtonList

My CheckBoxList

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related