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
– j08691

2016-04-20 14:11:35 +00:00
Commented Apr 20, 2016 at 14:11 — j08691
– j08691, Commented Apr 20, 2016 at 14:11
My bad. checkboxMail is the checkbox input

Kevin Py
– Kevin Py

2016-04-20 14:13:13 +00:00
Commented Apr 20, 2016 at 14:13 — Kevin Py
– Kevin Py, Commented Apr 20, 2016 at 14:13

Milind Anantwar · Accepted Answer · 2016-04-20 14:14:15Z

2

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>

answered Apr 20, 2016 at 14:14

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Py Over a year ago

it's Works ! But the setval value must be reversed. Thank you !

Community · Accepted Answer · 2017-05-23 11:52:40Z

-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, 2017 at 11:52

CommunityBot

11 silver badge

answered Apr 20, 2016 at 14:14

Jaroslav Štreit

4301 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

Change select option with checkbox checked and jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related