jQuery检查复选框是否在页面上

Question

I have a form that loads via ajax. Depending on the parameters sent to fetch the form, the form may have no checkboxes or it may have one or more check boxes.

I want to check if a checkbox is present on the page and if yes prompt the user to select one during validation if not selected.

If present, the checkboxes have the same class and a different ID.

<input type="checkbox" name="associatedClass" 
value="$associatedClsNumVal" class="getAssociatedClass" 
id="$associatedClsNumVal" />

What is the best approach? Can jquery "sense" if there are checkboxes on a page/in a form?

Thanks.

---

Thanks for the help on my previous post. I am adding to this one as it's the same type problem.

I now have a page where there are one or more groups of checkboxes and I need to ensure that only one checkbox is checked in each group.

Since I do not know how many groups there are until the page loads, what is the best approach to check this?

Thanks!

Answer 1

The easiest way is to check if there are any inputs of the type checkbox on the page. With jQuery you can use CSS selectors such as input[type="checkbox"] to find elements in the DOM. Combine that with .length and you can get how many there are on the page. The complete jQuery code for this would be

if ( $('input[type="checkbox"]').length ) {
    // Validate checkboxes
}

If there could be other checkboxes on the page that you wouldn't want validated then you can limit your search to a particular element. For example, if you only wanted to validate checkboxes within a specific form with an ID of myForm then you can select the form and use .find() to search for checkboxes within and only within that form.

if ( $('#myForm').find('input[type="checkbox"]').length )
{
    // Validate checkboxes
}

However with the validation you probably want to check each input individually and so instead of just checking the length to make sure there is at least one checkbox on the page we can use .each to find all checkboxes and then process them one at a time.

$('input[type="checkbox"]').each(function () {
    // Validate this checkbox
});

The advantage of that is if there are none on the page it won't try and validate anything and it's perfectly valid, so we don't need to check to see if there are any before our validation.

Answer 2

$(':checkbox').length

will get you a count of all checkboxes on the page. You can narrow this down by giving them a common class if you need to be more specific.

For example, to just count the checkboxes with class 'section1':

var $checks = $('.section1:checkbox');
console.log('There are ' + $checks.length + '  checkboxes');

https://jsbin.com/bowasi/edit?html,js,console,output

Answer 3

if ( $( "#myElement" ).length ) {

   // Your code here

}