Cannot uncheck checkbox

Question

I am trying to uncheck a checkbox once my form is submitted

on the html side I have the following

<form class="form contact-form" id="contact_form">
  <input type="checkbox" id="store_pickup" name="pickup" value="pickup" onclick="storeDetails()">
  <label for="store_pickup">Store Pickup</label>
  ....

And then I have an existing JS file for the form which work for all other input types but Checkbox

$(document).ready(function(){
$("#submit_btn").click(function(){

  //get input field values
    var user_name = $('input[name=name]').val();
    var user_email = $('input[name=email]').val();
    var user_message = $('textarea[name=message]').val();

    //simple validation at client's end
    //we simply change border color to red if empty field using .css()
    var proceed = true;
    if (user_name == "") {
        $('input[name=name]').css('border-color', '#e41919');
        proceed = false;
    }
    if (user_email == "") {
        $('input[name=email]').css('border-color', '#e41919');
        proceed = false;
    }

    if (user_message == "") {
        $('textarea[name=message]').css('border-color', '#e41919');
        proceed = false;
    }

    //everything looks good! proceed...
    if (proceed) {
        //data to be sent to server
        post_data = {
            'userName': user_name,
            'userEmail': user_email,
            'userMessage': user_message
        };

        //Ajax post data to server
        $.post('contact_business.php', post_data, function(response){

            //load json data from server and output message
            if (response.type == 'error') {
                output = '<div class="error">' + response.text + '</div>';
            }
            else {

                output = '<div class="success">' + response.text + '</div>';

                //reset values in all input fields
                $('#contact_form input').val('');
                $('#contact_form textarea').val('');
                // $('#store_pickup').attr('checked', false);
                // $("#store_pickup").prop('checked', false);


            }

            $("#result").hide().html(output).slideDown();
        }, 'json');

    }

    return false;
});

//reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function(){
    $("#contact_form input, #contact_form textarea").css('border-color', '');
      // $("#store_pickup").attr('checked', false);
      // $("#store_pickup").prop('checked', false);
    $("#result").slideUp();
  });
});

I've tried the two following statment commented out in the code but these do not work, can anyone assist me. Thank you!

Please provide a minimal verifiable example of your problem. You have given us the complete JavaScript code but only a portion of your form. Either provide the rest of the HTML or write a new JavaScript that will only look at the checkbox. — Ivan, Jun 09 '18 at 11:52

cra · Accepted Answer · 2018-06-10T03:38:22.297

4

You can toggle the checked attr of a HTML input of type="checkbox" with

$( elem ).prop('checked', false); 
$( elem ).prop('checked', true);

You can check the current state of the checked property of the checkbox with

$( elem ).prop('checked')

You can also use Chrome Inspect tool to view/test the current properties of a DOM element by selecting the element and then viewing the 'properties' tab. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

Note: In my version of Chrome I have to deselect and then re-select the DOM element to see the properties refresh after modifying a property value with the above JS.

edited Jun 10 '18 at 03:38

answered Jun 09 '18 at 12:46

cra

91
5

This doesn't seem to work mfleursmtl.com/index2.html – Noob Prgmr Jun 10 '18 at 03:07
Apologies; I was mixed up between $.attr() and $.prop(). I have edited my answer regarding Chrome Inspector. Ref 1) https://stackoverflow.com/questions/5874652/prop-vs-attr Ref 2) https://api.jquery.com/prop/ – cra Jun 10 '18 at 03:39

score 1 · Answer 2 · answered Jun 09 '18 at 12:04

1

It's the presence of absence of a checked attribute that controls whether the checkbox is checked. Setting the value of the attribute has no effect.

So you need

$("#store_pickup").removeAttr('checked');

answered Jun 09 '18 at 12:04

peeebeee

2,541
6
21
26

Cannot uncheck checkbox

2 Answers2