CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Parvesh
Parvesh

Reputation: 439

Jquery - changing checkbox value depending on option from Dropdown list

I want to create a form whereby, when a user selects an option from a dropdown list, certain items of a checkbox is checked.

http://jsfiddle.net/qNMAk/1/

i have started it here, no idea on how to implement it.

Upvotes: 0

Views: 6620

Answers (5)

codef0rmer
codef0rmer

Reputation: 10530

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/

Upvotes: 0

shaunsantacruz
shaunsantacruz

Reputation: 8930

One way is to use the custom data attribute: (data-*):

DEMO

<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
});

Upvotes: 0

Joe Landsman
Joe Landsman

Reputation: 2177

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

Upvotes: 3

Rafay
Rafay

Reputation: 31033

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);
});

DEMO

sure there are several ways to implement this scenario, but this demo will get you started

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

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;
    }
});

Upvotes: 0

Related Questions