使用选中的复选框和 jQuery 更改选择选项

Posted 2023-05-09

【中文标题】使用选中的复选框和 jQuery 更改选择选项

【英文标题】：Change select option with checkbox checked and jQuery

【发布时间】：2016-08-13 06:52:40

【问题描述】：

我有一个表格（Wordpress 上有联系表格 7）。此表单具有在选中复选框时显示<div> 的功能（使用jQuery）。我还希望选中此复选框时，选择>选项更改此值。

例如：如果未选中复选框，则 select > 选项的值为“NORMAL”，但如果选中复选框，则 select > 选项的值为“EXPORT”。

我的表格（HTML，不是联系表格 7）

<form action="" method="post" class="wpcf7-form">
    <!-- Inputs -->
    <input name="chkCheckbox" type="checkbox" id="checkbox" class="checkboxMail" />Export Demand
    <div class="checkMailOK">
            <!-- Others inputs -->
    </div>
    <select name="mail" class="wpcf7-form-control wpcf7-select mail" id="mail">
        <option value="NORMAL">NORMAL</option>
        <option value="EXPORT">EXPORT</option>
    </select>
    <!-- Others inputs -->
</form>

我的 JS

$(document).ready(function() 

    $(".checkboxMail").click(function() 

        $(".checkMailOK").slideToggle(400);

    );

);

【问题讨论】：

类checkboxMail的元素在哪里？

我的错。 checkboxMail 是复选框输入

【参考方案1】：

你需要在 change 函数中使用元素的选中状态来相应地设置选项的值和 div 的文本：

$(".checkboxMail").change(function() 
    var setval = this.checked ? "NORMAL" : "EXPORT";
    $(".checkMailOK").text(setval);
    $("#mail").val(setval);
);

$(function()
$(".checkboxMail").change(function() 
    var setval = this.checked ? "NORMAL" : "EXPORT";
    $(".checkMailOK").text(setval);
    $("#mail").val(setval);
 );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="wpcf7-form">
    <!-- Inputs -->
    <input name="chkCheckbox" type="checkbox" id="checkbox" class="checkboxMail" />Export Demand
    <div class="checkMailOK">
            <!-- Others inputs -->
    </div>
    <select name="mail" class="wpcf7-form-control wpcf7-select mail" id="mail">
        <option value="NORMAL">NORMAL</option>
        <option value="EXPORT">EXPORT</option>
    </select>
    <!-- Others inputs -->
</form>

【讨论】：

成功了！但是setval 的值必须颠倒过来。谢谢！

【参考方案2】：

$(".checkboxMail").on("click",function() 

Set select option 'selected', by value

);

可以点击或更改，然后你可以添加 if .checkboxMail.is(":checked") ....