CODEWITHSUNDEEP
jquery
tree em
tree em

Reputation: 21771

Check if any checkboxs are checked in jQuery?

I have a form.html:

    <div id="tag_option">
        <li><label for="id_customer_type">Customer type:</label>
            <select id="id_customer_type" class="required" name="customer_type">
                <option value="" selected="selected">All</option>
                <option value="NGO">NGO</option>
                <option value="GOV">GOV</option>

            </select>
        </li>

        <li>
            <label for="id_tag">Tag:</label> <dl>
            <dt><strong>School</strong></dt>
            <dd><label for="id_tag_1"><input
              name="tag"
              value="2"
              id="id_tag_1"
              type="checkbox"> Private</label></dd>
            <dd><label for="id_tag_2"><input
                   name="tag" value="3" id="id_tag_2" type="checkbox"
                   > Public</label></dd>
        </dl></li>

        <input id="tag_checked" name="tag_checked" value="" type="hidden">
        <input id="store_filter_saved" name="store_filter_saved" value="" type="hidden">
    </div>

How to do this?

I have tried..

$(document).ready(function(){
    function updateTagChecked() {
        var list_tag_selected = [];
        //$("input[name^=tag_]")
        $('#tag_option :checked').each(function() {
            list_tag_selected.push($(this).val());
        });
        $('#tag_checked').val(list_tag_selected.join("&"))
    }

    $(function() {
         $('#tag_option input').click(updateTagChecked);
         updateTagChecked();
    });

My problem in this point I just want to specify for only checkbox.

$('#tag_option :checked').each(function()

I try to change to:

$("input[name^=tag]")
$('div#tag_option input[name="tag"]').attr('checked')

Upvotes: 0

Views: 309

Answers (2)

Vitor M
Vitor M

Reputation: 967

The difference between:

$('input[name=tag]:checked') Does something to all the elements at the same time. Its pretty useful and fast if youre doing the same exact manipulations on all the elements, like giving them all a class, for example

$('#tag_option :checked').each(function() gives a little more freedom, as it iterates over EACH of the elements and then you can give them specific/different commands, one-by-one

Upvotes: 1

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124868

If I understood you correctly, you're trying to select checked checkboxes with name of "tag"? This will do:

$('input[name=tag]:checked')

$("input[name^=tag]") will obviously return all checkboxes, whether they're checked or not and $('div#tag_option input[name="tag"]').attr('checked') returns the value of the checked attribute from the first input with the name "name".

EDIT

Can you explain what difference output between $('input[name=tag]:checked') and $('#tag_option :checked')

The first gets all input elements that have "tag" as the value for name attribute that are also checked. "Checked" element means a radiobutton or checkbox that is in checked state (i.e. active). That selector would match these:

<input type="checkbox" name="tag" checked="checked" />
<input type="radio" name="tag" checked="checked" />

But not any of these:

<input type="checkbox" name="something_else" checked="checked" />
<input type="checkbox" name="tag" />
<input type="radio" name="not_tag" checked="checked" />

The second gets all checked elements inside an element that has an id of tag_option. That selector would match all of these input elements inside the div:

<div id="tag_option">
    <input type="checkbox" checked="checked" name="foo" />
    <input type="checkbox" checked="checked" name="bar" />
    <input type="radio" checked="checked" name="zyxxy" />
</div>

Upvotes: 3

Related Questions