Question

say i have these two uniquely ID’d divs with input elements that are not uniquely ID’d inputs.

<div id="column1" >
    ...
    <input checked="checked" type="checkbox" name="days" value="1" id="id_days_0" />
</div>

<div id="column2" >
    ...
    <input checked="checked" type="checkbox" name="days" value="1" id="id_days_0" />
</div>

how can i differentiate between the two inputs based on the top level div ID?

Obviously, this does not work:

$('#id_days_0').attr('checked')

Is there a way to only focus on one input’s ID from within a particular div?

Answer 1

As previously mentioned, you should always make your IDs unique and subsituting a class would be a good approach.

With that being said, you may reference the necessary items as follows:

HTML:

<div id="column1" >
    First <input checked="checked" type="checkbox" name="days" value="Chk1" id="id_days_0" />
</div>
<div id="column2" >
    Second <input checked="checked" type="checkbox" name="days" value="Chk2" id="id_days_0" />
</div>

JavaScript:

alert("Check1 = "+$("#column1 #id_days_0").val()+"\n"+"Check2 = "+$("#column2 #id_days_0").val());

The reason that this can work, is due to the referencing of the objects based off of referencing the parent first, and then the child.

Working example: http://jsfiddle.net/8VqtE/