Ändern Sie die Option mit Kontrollkästchen aktiviert und jQuery

Question

Ich habe ein Formular (mit Kontaktformular 7 auf Wordpress). Dieses Formular verfügt über eine Funktion zum Anzeigen eines <div>, wenn ein Kontrollkästchen aktiviert ist (mit jQuery). Ich wünsche auch, dass, wenn dieses Kontrollkästchen aktiviert ist, die Auswahl> Option diesen Wert ändern.

Beispiel: Wenn das Kontrollkästchen nicht aktiviert ist, hat die Option> den Wert "NORMAL", aber wenn das Kontrollkästchen aktiviert ist, hat die Option> den Wert "EXPORT".

Meine Form (HTML, Kontakt nicht Formular 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> 

Mein JS

$(document).ready(function() { 

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

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

    }); 

}); 

Answer 1

Sie müssen checked Status des Elements in der Änderungsfunktion verwenden, um den Wert der Option und festzulegen entsprechend Text von 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

}); 

Kann auf klicken oder ändern, dann können Sie hinzufügen, wenn .CheckboxMail.is (": checked") ....