How to find asp.net control by its css class name in JQuery

Question

0.00/5 (No votes)

See more:

Hi guys,

I have a asp.net website in c#.

In one page i have few check boxes only a table but not in a repeater or any grid.

I have added one more checkbox to 'Select All' or to 'Un Select All'

For that i wrote jquery.

<script type="text/javascript">
        $(document).ready(function () {
            $('#selecctall').click(function (event) {  //on click 
                if (this.checked) { // check select status
                    $("CheckBox.checkbox1").each(function () { //loop through each checkbox
                        this.Checked = true;  //select all checkboxes with class "checkbox1"               
                    });
                } else {
                    $('.checkbox1').each(function () { //loop through each checkbox
                        this.Checked = false; //deselect all checkboxes with class "checkbox1"                       
                    });
                }
            });

        });
    </script>

Table
-----
<tr>
                    <td style="background-color: Silver;">
                        <asp:Label ID="lblmsrig" runat="server" Text="Rig" />
                    </td>
                    <td style="font-weight: bold;">
                        <asp:CheckBox CssClass="checkbox1" ID="chkmsrigins" runat="server" Text="Insert" />
                    </td>
                    <td style="font-weight: bold;">
                        <asp:CheckBox CssClass="checkbox1" ID="chkmsrigview" runat="server" Text="View" />
                    </td>
                    <td style="font-weight: bold;">
                        <asp:CheckBox CssClass="checkbox1" ID="chkmsrigupdate" runat="server" Text="Update" />
                    </td>
                    <td style="font-weight: bold;">
                        <asp:CheckBox CssClass="checkbox1" ID="chkmsrigdel" runat="server" Text="Delete" />
                    </td>
                </tr>

but i'm not getting elements by its CssClass name.

Can any one plz help me.

Thanks

Posted 14-Jul-15 0:03am

abdul subhan mohammed

Add a Solution

5 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suvendu Shekhar Giri · Answer 1 · 2015-07-14T00:47:00

Solution 2

I would like to suggest two changes
1. Change

JavaScript

$("CheckBox.checkbox1")

to

JavaScript

$(".checkbox1")

2. Change

JavaScript

this.Checked = true;

to

JavaScript

this.checked = true;

Hope, it helps :)

Posted 14-Jul-15 0:47am

Suvendu Shekhar Giri

Comments

abdul subhan mohammed 14-Jul-15 7:06am

I already tried this..
But it's not working

Tushar Gohel · Answer 2 · 2015-07-15T00:30:00

Solution 5

$('[class$="checkbox"]').val();

Posted 15-Jul-15 0:30am

Tushar Gohel

Kornfeld Eliyahu Peter · Answer 3 · 2015-07-14T00:20:00

You are mixing server side markup with client side HTML...
There is no such tag 'CheckBox' in HTML - the ASP.NET control called CheckBox will render to an input tag in the final HTML code, so the proper selector for your checkboxes should be based on 'input[type="checkbox"'...
Fortunately jQuery has a shortcut to select all input elements of type checkbox...

JavaScript

$(':checkbox')

https://api.jquery.com/checkbox-selector/[^]

Dhaval Javiya · Answer 4 · 2015-07-14T03:57:00

C#

$("#selecctall").click(function () { //on click
          if ($(this).prop('checked') == true) {// check select status
              $(".checkbox1").each(function () {//loop through each checkbox
                  this.checked = true; //select all checkboxes with class "checkbox1"
              });
          }
          else {
              $(".checkbox1").each(function () {//loop through each checkbox
                  this.checked = false;//deselect all checkboxes with class "checkbox1"
              });
          }
      });

Hope this code will help you :)

abdul subhan mohammed · Answer 5 · 2015-07-14T20:23:00

Thanks everyone for helping me...

I found this and its working awesome

XML

<p>
<b>It is simple, (asp:CheckBox) is rendered as a (span) with label and input field with type="check". So when you are trying to say $(".chkboxClass").removeAttr('checked'); you are actually calling the (span) tag and that is the reason it is not working. To make it works just add:
</b></p>

<script type="text/javascript">
        $(document).ready(function () {
            $('#selecctall').click(function (event) {  //on click 
                if (this.checked) { // check select status                    
                    $(".checkbox1 :input").attr("checked", "checked");
                } else {
                    $(".checkbox1 :input").removeAttr('checked');
                }
            });

        });
    </script>

How to find asp.net control by its css class name in JQuery

5 solutions

Solution 2

Solution 5

Solution 1

Solution 3

Solution 4

Add your solution here

Preview 0