Jquery - изменение значения флажка в зависимости от опции из выпадающего списка

Question

Я хочу создать форму, при которой, когда пользователь выбирает опцию из выпадающего списка, отмечаются определенные элементы флажка.

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

Я начал здесь, не знаю, как это реализовать.

Answer 1

Есть много способов подойти к этому, но я бы порекомендовал установить «класс» флажков на значения параметров. Тогда вы можете использовать jQuery так:

$("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);
});

См. скрипка

Answer 2

Вы должны как-то связать флажки с каждым вариантом выпадающего меню. Одним из возможных решений было бы добавить атрибут data к каждой опции и установить флажки на его основе

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

Демо: http://jsfiddle.net/qNMAk/6/

Answer 3

каким-то образом вам придется связать флажки со значением списка выбора, если вы измените свою разметку так, чтобы имя флажка было равно значению выбора

<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 часть

$("select").change(function(e){
    $(":checkbox").prop("checked",false); //de-select all the checkboxes
var v = $(this).val();
    $(":checkbox[name='"+v+"']").prop("checked",true);
});

DEMO

конечно, есть несколько способов реализовать этот сценарий, но эта демонстрация поможет вам начать

Answer 4

Один из способов - использовать атрибут пользовательских данных : (данные - *) :

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

Answer 5

Вы можете начать использовать change() событие <select>, а затем что-то вроде этого:

$('select').change(function(){
    switch($(this).val()) {
        case 'Wedding':
            $('#checkbox').prop('checked', true);
            break;
        case 'Birthday':
            // something
            break;
    }
});