Search jQuery

jQuery Forum

Getting Started

petattleb..

when radio button is clicked, addclass to element

in Getting Started • 10 years ago

Hello,

JQuery newbie here. I've only done the basics: show/hide and basic validation.

What I'm trying to do is; I have an element in a form with two radio buttons (name="haveRooms"): Yes (id="haveRooms_yes") and No (id="haveRooms_no").

There is a show hide feature so that when the Yes radio button is clicked, a div appears with a drop down menu.

What I would like to happen, is when the Yes radio button (id="haveRooms_yes") is clicked, the drop down menu element, numRooms, has the required class added to it (class="required").

If the No radio button (id="haveRooms_no") is clicked, then of course, the show/hide field remains hidden and therefore the numRooms drop down menu remains without the class="required"

The only examples I have seen so far, implement addClass using the name and I think I need to implement this using the id.

Thanks in advance!

Peter T

Replies(2)

kbwood.au

Re: when radio button is clicked, addclass to element

10 years ago

Try this:

$('input[name="haveRooms"]').change(function() {
var isYes = $('#haveRooms_yes').is(':checked');
$('#numRooms').toggleClass('required', isYes);
$('#menuDiv').toggle(isYes);
});

petattleb..

Re: when radio button is clicked, addclass to element

10 years ago

Thanks for the help. I think I'm screwing something up though.

Below is my code, including the show/hide javascript. Could that possibly be causing a conflict?

//show / hide

$(document).ready(function() {

$("input[name$='haveRooms']").click(function() {

var test = $(this).val();

$("div.desc").hide();

$("#isThis_" + test).show();

});

//change class

$('input[name="haveRooms"]').change(function() {

var isYes = $('#haveRooms_yes').is(':checked');

$('#numRooms').toggleClass('required', isYes);

$('#isThis_Yes').toggle(isYes);

});

</script>

<p>Do you have a place for rent?<span class="required">* </span> </p>

<input type="radio" name="haveRooms" value="No" id="haveRooms_no" class="required" checked="checked" />No

</label>

{!-- NO CONTENT --}

</div>

<input type="radio" name="haveRooms" value="Yes" id="haveRooms_yes" />Yes

</label>

<p><label for="numRooms">How many rooms?</label>

<option value="">Rooms Available</option>

<option value="Two Rooms">Two Rooms</option>

<option value="Three Rooms">Three Rooms</option>

<option value="Four Rooms">Four Rooms</option>

</select></p>

</fieldset>

</div>

</fieldset>

</span></p>

</fieldset>

</form>

Top Reply

Response title

Attachments

jQuery Forum

when radio button is clicked, addclass to element

Replies(2)

Re: when radio button is clicked, addclass to element

Re: when radio button is clicked, addclass to element

Statistics

Tags

Actions

Related Posts