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

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

---

我是从这里开始的，不知道如何实现它。

您可以开始使用

的

change（）

事件，然后使用类似以下内容：

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

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

---

您可以开始使用

的

change（）

事件，然后使用类似以下内容：

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

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

---

在某种程度上，如果修改标记使复选框的名称等于选择值，则必须将复选框与选择列表值关联起来

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

---

当然，有几种方法可以实现此场景，但此演示将让您开始

如果您修改标记使复选框的名称与选择值相等，您将不得不以某种方式将复选框与选择列表值关联起来

<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(){
    switch($(this).val()) {
        case 'Wedding':
            $('#checkbox').prop('checked', true);
            break;
        case 'Birthday':
            // something
            break;
    }
});

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

---

请参见

有许多方法可以实现这一点，但我建议将复选框的“类”设置为选项值。然后可以像这样使用jQuery：

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

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

---

请参见

您必须以某种方式将复选框与每个下拉选项绑定在一起。一种可能的解决方案是为每个选项添加

数据
属性，并在此基础上选择复选框

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


婚礼
生日
健康日
习俗
$（'select'）。更改（函数（）{
$（'input:checkbox'）.attr（'checked'，false）；
var arrData=$（'option:selected'，this）.attr（'data'）.split（'，'）；
用于（ARR数据中的i）{
$（“输入[value='”+arrData[i]+“']”）attr（'checked'，true）；
}
}).change（）；

演示：
您必须以某种方式将复选框与每个下拉选项绑定在一起。一种可能的解决方案是为每个选项添加
数据
属性，并在此基础上选择复选框

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


婚礼
生日
健康日
习俗
$（'select'）。更改（函数（）{
$（'input:checkbox'）.attr（'checked'，false）；
var arrData=$（'option:selected'，this）.attr（'data'）.split（'，'）；
用于（ARR数据中的i）{
$（“输入[value='”+arrData[i]+“']”）attr（'checked'，true）；
}
}).change（）；

演示：
如何知道哪些复选框与哪些选择选项相关？如何知道哪些复选框与哪些选择选项相关？