Jquery - How can I check if all of the checkboxes are unchecked? - php

Question

For some reason my code doesn't work?! I need to check checkboxes, if all are "unchecked", then enable hidden field and send value to db, so I can identify that checkboxes were unchecked.
Question 1: Why isn't my jquery code working?
Question 2: I need to record checked or unchecked values to DB. My plan is to check if none selected in php. Is this a good practice?
HTML
<tr class="more_info">
<th valign="top">Other options:</th>
{foreach from=$HTML_cOPTIONS key=dbname item=optname}
{if ! empty($CARINFO[car].{$dbname})}
<td><input type="checkbox" id="forced_checkbox" name="c_options[]" value="{$dbname}" checked/> {$optname} </br></td>
{else}
<td><input type="checkbox" id="forced_checkbox" name="c_options[]" value="{$dbname}"/> {$optname} </br></td>
{/if}
{/foreach}
<input type="hidden" id="forceSendCheckBox" name="c_options[]" value="nocheckboxes"/>
<input type="button" value="Check" id="check" />
</tr>
Jquery
$('#check').bind('click',function()
{
if ($('#forced_checkbox').filter(':not(:checked)').length == 0) {
console.log('at least one checked');
$("#forceSendCheckBox").prop('disabled',true);//do not send this field to DB
} else {
console.log('nothing checked');
$("#forceSendCheckBox").prop('disabled',false);//send empty checkboxes
}
});
UPDATE
Here's a fiddle, it still seems to be broken. :-/
http://jsfiddle.net/L5J96/

Answer 1

IDs have to be unique. Use a class instead.
In your fiddle you had several problems. First, you forgot to select the jQuery framework from the menu, so none of the jQuery code worked. Second, you changed the filter from not(:checked) to (:checked), but didn't change == 0 to > 0. Third, without the not, you shouldn't have parentheses around the filter selector. Fourth, you tried to display the message in an input field using .text(), but the correct method is .val().
Here's the corrected code:
$('#check').on('click', function () {
if ($('.forced_checkbox').filter(':checked').length > 0) {
$('#forceSendCheckBox').val('at least one checked');
} else {
$('#forceSendCheckBox').val('nothing checked');
}
});
FIDDLE

Answer 2

As Barmar mentioned, the IDs must be unique.
Next, use .on() instead of .bind() - similar syntax, so easy to do. (.bind is deprecated)
However, to answer your question, you can quickly discover which checkboxes were not checked by selecting all unchecked checkboxes and iterating through them.
If you need to create a list of which checkboxes were unchecked, then you need something unique about each one (if every man in the room is named 'Bob', then making a useful list of all the men with brown hair will be difficult). Use the ID attr for that, as in the jsFiddle example at bottom.
$("input:checkbox:not(:checked)").each(function() {
alert($(this).attr('id'));
});
jsFiddle here
Here is an expanded jsFiddle example that demonstrates how to save the list of unchecked checkboxes into a hidden field, as requested in your post.
With respect to your jsFiddle, the following things needed adjusting:
See revised jsFiddle
Use of the .on() syntax. Use .on(document) or .on(body) instead:
$('document').on('action', '#elementID', function() { //Do stuff here });
In order to interate through the collection of unchecked objects, you should use jQuery's .each() method.
$('.forced_checkbox').filter(':not(:checked)').each(function() { //Do stuff });
Hope this helps.