jquery: toggle a fieldset based upon a specific checked checkbox in an array of multiple checkboxes

Question

Using jquery, given multiple checkboxes, how please would we toggle a fieldset on/off if a particular checkbox is checked/ unchecked? (more than one checkbox may be chosen as this is multiple)

I've tried using ':checked' and 'jQuery.inArray' together with toggle() but no luck yet. Example HTML without the script:

<form>

 Which food group do you like?
 <input type="checkbox" name="nutrition[]" value="Fruit">
 <input type="checkbox" name="nutrition[]" value="Vegetables">
 <input type="checkbox" name="nutrition[]" value="Sweets">

<!-- show this input (toggle on/off) only if 'Fruit' is one of the checked boxes-->
<fieldset id="someid" style="display:none;>
 You chose Fruit! Name one fruit: <input type="text" name= "afruit" />
</fieldset>

</form>

?

here is the complete html + script based on Jason P's answer, using id as selector:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
window.onload = function() {
$('#fruitid').change(function(e) {
    $('#someid').toggle(this.checked);
});
};
</script>
</head>
<body>
<form>
 Which food group do you like?
 <input type="checkbox" name="nutrition[]" value="Fruit" id="fruitid">
 <input type="checkbox" name="nutrition[]" value="Vegetables">
 <input type="checkbox" name="nutrition[]" value="Sweets">

<!-- show this input (toggle on/off) only if 'Fruit' is one of the checked boxes-->
<fieldset id="someid" style="display:none;">
 You chose Fruit! Name one fruit: <input type="text" name= "afruit" />
</fieldset>

</form>
</body>
</html>

possible duplicate of Show/Hide Field using Jquery based on user input — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 23, 2013 at 14:30

Jason P · Accepted Answer · 2013-07-23 14:30:49Z

1

$('input[value="Fruit"]').change(function(e) {
    $('#someid').toggle(this.checked);
});

Might be a good idea to add a class or id to the "Fruits" checkbox so you can use a better selector.

answered Jul 23, 2013 at 14:30

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

HowardK Over a year ago

Please would you show the script using an id such as <input type="checkbox" name="nutrition[]" value="Fruit" id="fruitid"> Also, how would one specify the checkbox name in addition to input[value="Fruit"] ... for example input[name='nutrition[]'] ...

Jason P Over a year ago

The jQuery learning site is very helpful. What you're looking for is the first example: $('#fruitid') learn.jquery.com/using-jquery-core/selecting-elements.

HowardK Over a year ago

Oh, upon submit various entries are validated. If the form is again displayed, the checked boxes correctly remain checked (not related to this post) but now the fieldsets are no longer shown even tho the boxes are checked. How would this be solved please? (I tried the same code with .submit added but no luck.) ps. not sure if this should be a whole new question ...

Jason P Over a year ago

You would need to run the existing change logic on page load as well.

Jason P Over a year ago

$(document).ready(function() { $('#someid').toggle($('#fruitid').prop('checked')); }); should work.

|

Dhaval Bharadva · Accepted Answer · 2013-07-24 08:44:12Z

1

Try as follows:

HTML

<input type="checkbox" name="nutrition[]" value="Fruit" class="fruit">

JS

$(".fruit").change(function(){
    if($(this).is(':checked')){  
        $("#someid").css("display","block");
    }else{
        $("#someid").css("display","none");
    }
});

Note: i have added the class attribute to the checkbox so same as above you can do for each checkbox.

edited Jul 24, 2013 at 8:44

answered Jul 23, 2013 at 14:45

Dhaval Bharadva

3,0852 gold badges26 silver badges36 bronze badges

6 Comments

HowardK Over a year ago

thank you. the if else statement makes it easy to read however there seems to be a small bug somewhere. can't get it to work.

Dhaval Bharadva Over a year ago

can you tell me what error you got when you use the above code?

HowardK Over a year ago

sure - the fiddle: jsfiddle.net/7AtGg the '#solmeid' input does not toggle

Dhaval Bharadva Over a year ago

i have updated my answer please use now it will surly work i have tried it. its my syntax error i forget to put ':checked' in single quote.

HowardK Over a year ago

yes, that's it. jsfiddle.net/7AtGg/1 Maybe this can also be solved: upon submit, in order to validate the form entries, the '#someid' fieldset no longer shows even tho' the related checkbox/s is/are checked. the same issue with Jason P's solution. any ideas please?

|

Collectives™ on Stack Overflow

jquery: toggle a fieldset based upon a specific checked checkbox in an array of multiple checkboxes

2 Answers 2

7 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related