Sorry that this take a while to demonstrate but it's a complete puzzle
(to me)!
I would like to determine whether there are any checked radio buttons
within the
<div> "selected_courses" in the following HTML:
<div id="selected_courses>
<div class="course">
<input type="radio" name="1st" .. />
[ 5 more radio buttons]
</div>
[ 2 more courses ]
</div>
When the code below is executed, there are 3 selected courses; since
each course has six radio buttons, there are 18 radio buttons. When I
add the further qualification to select only the checked radio buttons,
the reponse is zero buttons (although there are in fact 3 checked
buttons).
However, if I approach the search in another more roundabout way -- by
examining
each of the radio buttons in turn to determine how many are checked,
the answer
is the correct one: 3 (one within each course).
Notice that within the following each loop, I look among the
selected_courses
for an input element with a specified name which is checked and *that*
doubly
conditioned selector works as expected; that is, the if statement is
executed.
So why does the double condition on the "input" selector fail the
first time
and succeed the second time????
Perhaps relevant:
When I replace:
$('#selected_courses .course input[type="radio"][checked=true]')
with
$sel_courses.find('input[type="radio"][checked=true]')
the selection works. Is there some difference between three levels of
selection criteria without an initial jQuery object and using find() to
apply a single criterion to an existing jQuery object?
Code:
====
if (ui.panel.id == "final_ordered_list") {
console.log("Clicked on Final Ordered List tab:");
var $sel_courses = $("#selected_courses .course");
console.log("Have " + $sel_courses.length + " selected courses.");
var $radio_buttons = $('#selected_courses .course
input[type="radio"]');
console.log("Have " + $radio_buttons.length + " radio buttons.");
var $chked_radio_buttons = $('#selected_courses .course
input[type="radio"][checked=true]');
console.log("Got " + $chked_radio_buttons.length + " straight
checked radio buttons.");
var checked_radio_buttons = 0;
$radio_buttons.each(function() { if (this.checked)
checked_radio_buttons += 1; });
console.log("Got " + checked_radio_buttons + " roundabout checked
radio buttons.");
if (checked_radio_buttons > 0) {
console.log(" " + $sel_courses.length + " selected courses");
console.log(" " + checked_radio_buttons + " checked radio
buttons");
$.each(["1st","2nd","3rd","4th","5th","6th"], function(index,
curr_ordinal) {
// if there is a course with the curr_ordinal radio button
checked
// (can only be one), then copy to Final Ordered List;
var $checked_radio_button = $sel_courses.find('input[name="' +
curr_ordinal + '"][checked=true]')
if ($checked_radio_button.length > 0) {
// do something;
}
});
});
});
Console output:
==============
Clicked on Final Ordered List tab:
Have 3 selected courses.
Have 18 radio buttons.
Got 0 straight checked radio buttons.
Got 3 roundabout checked radio buttons.
3 selected courses
3 checked radio buttons
Many thanks for any insights into what's happening!
B Ruml
