Search jQuery

jQuery Forum

Trouble using change() function with checkboxes

in Using jQuery • 8 years ago

I'm having trouble getting this change function to work with checkboxes. What I'm trying to do is initially show "startTrendy" to all users, and then once they answer the question "personal_styles", "startTrendy" is hidden and "startClassic" is displayed unless they've picked either 'Trendy' or 'Modern'.

A standard show/hide function isn't working here because they can select up to 3 values (there are 10 choices), and if any of their choices are 'Trendy' or 'Modern' then "startTrendy" needs to be displayed.

JS

$(document).ready(function(){
$(".img_change").change(function(){
if( $('input[name=personal_styles[]][value=trendy]').is(':checked') ) {
$("#startTrendy").show();
$("#startClassic").hide();
} else {
$("#startClassic").show();
$("#startTrendy").hide();
}
});
});

HTML

<form method="post" action="#">
<div id="startTrendy" >Trendy Pics</div>
<div id="startClassic" style="display:none">Classic Pics</div>
<input type=checkbox name="personal_styles[]" value="trendy" class="img_change">Trendy
<input type=checkbox name="personal_styles[]" value="modern" class="img_change">Modern
<input type=checkbox name="personal_styles[]" value="feminine" class="img_change" >Feminine
<input type=checkbox name="personal_styles[]" value="antique" class="img_change">Antique
<input type=checkbox name="personal_styles[]" value="classic" class="img_change" >Classic
</form>

This is a simplified version of my code (since I can't get it to work for one value I couldn't be sure of the correct syntax to use for an OR statement, although I know it would be similar to this:

$("[name=personal_styles[]]").val() === "trendy" || $("[name=personal_styles[]]").val() === "modern")

Replies(4)

dsvick

Re: Trouble using change() function with checkboxes

8 years ago

Because you have square brackets in the name of the elements and you're using it in the selector you need to escape them with \\, your selector should look like this (I bolded the escape characters I added):

if( $('input[name=personal_styles\\[\\]][value=trendy]').is(':checked') ) {

Here is the doc reference on it, check out the second paragraph: http://api.jquery.com/category/selectors/

Dave

Chaya Coo..

Re: Re: Trouble using change() function with checkboxes

8 years ago

That worked :-D And thank you for sharing that info about square brackets - that's very useful :-)

Any idea how I would add a 3rd element to that statement for when 'personal_styles[]' is empty (if they unselect a choice I need it to revert to/remain with 'startTrendy').

I tried value="" but that didn't work

if( $('input[name=personal_styles[]][value=trendy]').is(':checked') || $('input[name=personal_styles[]][value=modern]').is(':checked') || $('input[name=personal_styles[]][value=""]').is(':checked') ) {