Traverse DOM over and down

Question

I have a radio button group in a div, which has a sibling div that contains various textboxes, 4 levels down. If the radio button 'false' is checked, I need to check all the text boxes for that group and if any text box has a value, pop up an alert.

Right now it pops up two alerts for any 'false' radio button regardless of the values in the textboxes. I'm not sure why it doubles the alert for any 'false' radio button, but I am pretty sure it is not actually reading the textboxes.

I am assuming the find() method will look down into multiple levels of children.

EDIT - I should also mention there are 5 questions, so the entire 'question' class is repeated 5 times and when the submit button is clicked, it needs to check each question.

Here is the markup:

<div class="question">
    <div class="radio-buttons">
        <input type="radio" name="radios" value =" true" />Yes
        <input type="radio" name="radios" value =" false" />No
    </div>
    <div class="label">List out the date, name & category....</div>
    <div class="answer-container">
        <fieldset class="answer-container-sub">
           <div class="answer-group">
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
           </div>
           <div class="answer-group">
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
               <div class="question-label">Name</div>
               <div class="question-answer">
                   <input type="text" />
               </div>
           </div>
       </fieldset>
   </div>
</div>
<input type="submit" id="button" value="Click Me" />

jQuery ## Editted to change class name in the below code so it matches the above html. ##

$("#button").on("click", function () {
    $('input:radio').each(function () {
        if ($(this).closest('.radio-buttons').find('input:checked').val() == "False") {
            if ($(this).siblings('.answer-container').find('input[type=text]').val() != '') {
               alert("You clicked no but a textbox has a value");
            }
        }
    });
});

Answer 1

Some of the traversing issues may have to do with the fact that there is a leading space in your HTML radio values like " true". That space needs to be removed.

I took a different approach (because some of your markup that you reference in your jQuery code is missing from this post) and created this http://jsfiddle.net/jayblanchard/dGqwZ/ which shows how easy it should be to traverse the DOM.

$('input[name="radios"]').change(function() {
    var currentValue =  $(this).val(); // spaces need to be removed from radio values in HTML
    if('false' == currentValue) {
        var answers = $(this).closest('.question').find('.answer-container .question-answer');
        $(answers).find('input').each(function() {
            var answerValue = $(this).val();
            if('' != answerValue) {
                alert(answerValue);
            }
        });
    }
});