Question

I am running into this Jquery div show() hide() problem when you click on a radio button. I have searched this forum and was able to get the function working but not for all the radio buttons. I have n number of radio buttons and when a user clicks on “Yes”, I want to display a div section. But the problem I am running into is this works correctly for the first radio button, the rest doesn’t respond to the clicks. Here is the js i am using

$(document).ready(function() {

    $('#isYes').click(function() {
        var test = $(this).val();
        alert(test)
        $("div.desc").hide();
        $('#divCheck').show();

    });

    $('#isNo').click(function() {

        $('#divCheck').hide();
    });

And my jsp code looks like

 <p>

           <td><core:out value="${obj.txt}" /> <form:radiobutton
                                            path="car[${Status.index}].carSelection"
                        value="isYes" onclick="" id="isYes" label="Yes" /> <form:radiobutton
                        path="car[${Status.index}].carSelection"
                        value="isNo" id="isNo" label="No" />
    </td>

</p>



     <div id="divCheck" class="desc({where desc is display: none;})">


                    <c:forEach items="${car.carList}" var="type"
                        varStatus="cstatus">

                        <form:checkbox path="carList[${cstatus.index}]"
                            value='${type.carName' />
                        <core:out value="${type.carName}" />
                        <br />

            </c:forEach>

            </div>

Why do the check boxes only display for the first radio button and not for the rest?

Answer 1

As alexg stated, if you are using multiple id’s on a page, jquery will only find the first one. If you change it to a class. You will get back a selector with any number of elements with the class.

This Works:

<input class="isYes" type="radio">
<input class="isYes" type="radio">
var totalElements = $('.isYes').length; // 2

This Wont:

<input id="isYes" type="radio">
<input id="isYes" type="radio">
var totalElements = $('#isYes').length; // 1