Question

我有一个表单（在Wordpress上使用Contact Form 7）。此表单有一个功能，用于在选中复选框时显示<div>（使用jQuery）。我还希望在选中此复选框时，选择＆gt;选项更改此值。

例如：如果未选中复选框，则选择＆gt;选项的值为“NORMAL”，但如果选中复选框，则选择＆gt;选项的值为“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);

    });

});

Answer 1

您需要在更改函数中使用已检查的元素状态来相应地设置选项和文本的值：

$(".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>

Answer 2

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

Set select option 'selected', by value

});

可以点击或更改，然后你可以添加.checkboxMail.is（“：checked”）....

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

2 个答案: