更改選擇選項複選框選中，jQuery

Question

我有一個表單（與Wordpress上的聯繫表格7）。此窗體有一個功能，用於在選中複選框（使用jQuery）時顯示<div>。我也希望當這個複選框被選中時，select>選項會改變這個值。例如：如果未選中複選框，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); 

    }); 

}); 

Answer 1

您需要在更改函數中使用元素的選中狀態來設置選項的值因此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>

Answer 2

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

Set select option 'selected', by value

}); 

可以點擊或更改，然後如果.checkboxMail.is（「：checked」），則可以添加....