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")