Change select option with checkbox checked and jQuery

Question

I have a form (with Contact Form 7 on Wordpress). This form has a feature for display a <div> when a checkbox is checked (with jQuery). I wish also that when this checkbox is checked, the select > option change this value.

eg: if the checkbox is not checked, the select > option has value "NORMAL", but if checkbox is checked, the select > option has value "EXPORT".

My Form (HTML, not Contact Form 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>

My JS

$(document).ready(function() {

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

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

    });

});

Where's the element with the class `checkboxMail`? – j08691 Apr 20 '16 at 14:11 — j08691, Apr 20 '16 at 14:11
My bad. `checkboxMail` is the checkbox input – Kevin Py Apr 20 '16 at 14:13 — Kevin Py, Apr 20 '16 at 14:13

score 2 · Accepted Answer · answered Apr 20 '16 at 14:14

You need to use checked state of element in change function to set the value of option and text of div accordingly:

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

it's Works ! But the `setval` value must be reversed. Thank you ! — Kevin Py, Apr 20 '16 at 14:23

score -1 · Answer 2 · edited May 23 '17 at 11:52

-1

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

Set select option 'selected', by value

});

Can be on click or change, then you can add if .checkboxMail.is(":checked") ....

edited May 23 '17 at 11:52

Community

1
1

answered Apr 20 '16 at 14:14

Jaroslav Štreit

415
1
5
16

Change select option with checkbox checked and jQuery

2 Answers2