Question

我想创建一个表单，当用户从下拉列表中选择一个选项时，会检查复选框的某些项目。

我已经在这里开始了，不知道如何实现它。

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

请参阅fiddle

Answer 2

您可以开始使用change() <select>事件，然后再使用以下内容：

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

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

确定有多种方法可以实现此方案，但此演示将帮助您入门

Answer 4

一种方法是使用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
});

Answer 5

您必须以某种方式将复选框与每个下拉选项绑定。一种可能的解决方案是为每个选项添加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/

Jquery - 根据下拉列表中的选项更改复选框值

5 个答案: