Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery - is at least one checkbox checked

I am in the process of learning JQuery thanks mostly to the positive reference here on Stack Overflow. I need a function that checks all the checkboxes in an element which have the same CSS class. It should returns true if at least one of them is checked. There are also other boxes in the element that are irrelevant to the check.

The CSS class is unnecessary and only in place to create a way to identify the checkboxes in the group. It feels like bad practice, so any recommendations about other ways to identify them are welcome.

like image 423
Laramie Avatar asked May 31 '10 06:05

Laramie


People also ask

How do you check if atleast one checkbox is selected in jQuery?

submit(function(){ if(! $('#frmTest input[type="checkbox"]').is(':checked')){ alert("Please check at least one."); return false; } }); is(':checked') will return true if at least one or more of the checkboxes are checked.

How do you check if any of the checkbox is checked in jQuery?

We can check the status of a checkbox by using the :checked jQuery selector together with the jQuery function is . For example: $('#el').is(':checked') .

How can I require at least one checkbox be checked before a form can be submitted?

How can I enforce that requirement? You could use PHP to check if at least 1 of the check boxes is checked. You would probably also want to make sure your <input "name"> is different for each check box otherwise getting the return variable values might be tricky.


2 Answers

To check if at least one is checked:

 $(".classname:checked", container).length > 0

"container" is the (optional) container element.

If you want to avoid using class names for grouping, you should simply give each checkbox the same name:

<input type="checkbox" name="group1" value="1" />
<input type="checkbox" name="group1" value="2" />
<input type="checkbox" name="group1" value="3" />

Then you can change the test code to:

 $("[name=group1]:checked").length > 0
like image 182
Philippe Leybaert Avatar answered Oct 16 '22 20:10

Philippe Leybaert


A radio button list was not an option due to the page layout. I solved it with a Custom Validator.

Add this JavaScript function to the page

function ValidateDDA(s, a) {
    a.IsValid = ($(".chk:checked", $('parentDiv')).length > 0);
}

Then add a CustomValidator to the page

<asp:CustomValidator runat="server" ID="cvDDLCorrect" ClientValidationFunction="ValidateDDA"
ErrorMessage="No hay resuesta correcta" CssClass="error" />

Works like a charm. Thanks for suggestions.

like image 23
Laramie Avatar answered Oct 16 '22 20:10

Laramie