I want to create a form whereby, when a user selects an option from a dropdown list, certain items of a checkbox is checked.
i have started it here, no idea on how to implement it.
-
How do you know which checkboxes relate to which select options?nnnnnn– nnnnnn2012-02-25 05:49:56 +00:00Commented Feb 25, 2012 at 5:49
Add a comment
|
5 Answers
There are many ways to approach this but I would recommend setting the "class" of the checkboxes to the option values. Then you could use jQuery like this:
$("select[name='types']").change(function() {
// Get the value selected (convert spaces to underscores for class selection)
var value = $(this).val().replace(' ', '_');
// Clear checks, then check boxes that have class "value"
$(":checkbox").prop("checked",false).filter("."+value).prop("checked",true);
});
See fiddle
Comments
You could start using the change() event of <select> and then something like this:
$('select').change(function(){
switch($(this).val()) {
case 'Wedding':
$('#checkbox').prop('checked', true);
break;
case 'Birthday':
// something
break;
}
});
Comments
in some way you will have to relate the checkboxes to the select list value, if you modify your markup to give name of the checkbox equal to the select values
<select name="types">
<option value="Wedding">Wedding</option>
<option value="Birthday">Birthday</option>
<option value="Health Day">Health Day</option>
<option value="Custom Event">Custom</option>
</select>
<br/><br/><br/>
<fieldset>
<h3><span>1</span>Entertainment:</h3>
<input type="checkbox" name="Wedding" value="Wedding" /> DJ<br />
<input type="checkbox" name="Birthday" value="Birthday" /> Birthday<br />
</fieldset>
jquery part
$("select").change(function(e){
$(":checkbox").prop("checked",false); //de-select all the checkboxes
var v = $(this).val();
$(":checkbox[name='"+v+"']").prop("checked",true);
});
sure there are several ways to implement this scenario, but this demo will get you started
Comments
One way is to use the custom data attribute: (data-*):
<select name="types">
<option value="">Select</option>
<option value="wedding">Wedding</option>
<option value="birthday">Birthday</option>
<option value="health_day">Health Day</option>
<option value="custom_event">Custom</option>
</select>
<input type="checkbox" name="entertainment" data-evt="custom_event" value="dj" /> DJ<br />
<input type="checkbox" name="entertainment" data-evt="birthday" value="Magician" /> Magician<br />
<input type="checkbox" name="entertainment" data-evt="custom_event" value="liveband" /> Live Music
...
jquery
$('select').change(function(){
var $evt = $(this).val(); // get type of event
$(':input[type="checkbox"]').prop('checked', false); // clear
$(':input[data-evt="' + $evt + '"]').prop('checked', true); // Set check
});
Comments
You have to bind the checkboxes with each dropdown options somehow. One possible solution would be to add data attribute to each option and selecting checkboxes based on that.
<select name="types">
<option value="Wedding" data='dj,singer,wedding,lighting'>Wedding</option>
<option value="Birthday" data='singer,lighting'>Birthday</option>
<option value="Health Day" data='comedian,magician,outdoor'>Health Day</option>
<option value="Custom Event">Custom</option>
</select>
$('select').change(function () {
$('input:checkbox').attr('checked', false);
var arrData = $('option:selected', this).attr('data').split(',');
for (i in arrData) {
$("input[value='" + arrData[i] + "']").attr('checked', true);
}
}).change();
Demo : http://jsfiddle.net/qNMAk/6/
