Question

I need to see if any checkboxes within a range in a fieldset are checked

<fieldset id="issues">
    <input name="A" id="issue_0" type="checkbox" value="A" /> <--- this one
    <input name="B" id="issue_1" type="checkbox" value="B" />
    <input name="C" id="issue_2" type="checkbox" value="C" />
    <input name="D" id="issue_3" type="checkbox" value="D" />
    <input name="E" id="issue_4" type="checkbox" value="E" />
</fieldset>

The field set is #issues, this works fine to see if any of them are checked

if( $('#issues input[type="checkbox"]').is(':checked') ){
  console.log("One of them is checked");
}

But I want to see if a specific checkbox by index is checked, ie if the first one is checked. I tried this…

if( $('#issues input[type="checkbox"][0]').is(':checked') ){
  console.log("Item one is checked");
}

but it doesn’t work

How do I target a specific checkbox by index within a fieldset?

Answer 1

if( $('#issues input[type="checkbox"]').first().is(':checked') ){
    console.log("Item one is checked");
}

Use .first() to grab the first one in the wrapped set.

Also I’d recommend using .prop() as it is easier to deal with when it comes to cross-browser issues!

if( $('#issues input[type="checkbox"]').first().prop('checked') === true ){
    console.log("Item one is checked");
}​

If you needed to get a specific index you could do:

var index = 2;
if( $('#issues input[type="checkbox"]').eq(index).prop('checked') === true ){
    console.log("Item one is checked");
}​