How to check which checkbox is checked in MVC using JQuery?

Question

I have 3 checkboxes and want to see that which checkbox is checked [vice-versa]. If Group1 is checked then it should return Group1:true and vice versa.

  @Html.CheckBoxFor(m => m.Group1, new { @class = "chk",@id= "Group1" })                
  @Html.CheckBoxFor(m => m.Group2, new { @class = "chk", @id = "Group2"})               
  @Html.CheckBoxFor(m => m.Group3, new { @class = "chk", @id = "Group3"})

Script

   $('.chk').change(function () {  
         var id = $(this).val();          
          $('#' + id).is(":checked");
        });

Looks to me like you're missing a closing ' after the .chk selector. Is that a copy error? — Ryan Gibbs
– Ryan Gibbs, Commented May 30, 2018 at 23:24
it should return Group1:true Where do you want to return to? — Win
– Win, Commented May 31, 2018 at 0:07

Ryan Gibbs · Accepted Answer · 2018-05-30 23:55:46Z

1

You can accomplish this all by using the $(this) object within your change listener. Here's a sample of how to do that:

$('.chk').change(function () {          
    console.log($(this).attr('id') + ":" + $(this).is(':checked'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='Group1' class='chk'>
<input type='checkbox' id='Group2' class='chk'>
<input type='checkbox' id='Group3' class='chk'>

Here we grab the attribute 'id' to get the id of the control that was changed and then concatenate that with the result of .is(':checked'). Of course in my example I'm just console.logging the result, but you could return or do whatever you need to do with it.

Hope that helps.

answered May 30, 2018 at 23:55

Ryan Gibbs

1,3201 gold badge15 silver badges29 bronze badges

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

Comments

RickL · Accepted Answer · 2018-05-31 00:01:12Z

If you wanted more information on the state of the other checkboxes following the event, you could use (with comments):

$(function () {
    $(".chk").on("change", function () {
        var eventId = $(this).attr("id");
        // checked or unchecked for change event
        if ($(this).is(":checked")) {
            console.log("=> " + eventId + " has been checked");
        } else {
            console.log("=> " + eventId + " has been unchecked");
        }

        // Iterate all checkboxes
        $.each($(".chk"), function () {
            var id = $(this).attr("id");
            if (id !== eventId) {
                if ($(this).is(":checked")) {
                    console.log("=> " + id + " is checked");
                } else {
                    console.log("=> " + id + " is not checked");
                }
            }
        });
    });
});

Collectives™ on Stack Overflow

How to check which checkbox is checked in MVC using JQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related