Javascript 无法取消选中复选框

我正在尝试在提交表单后取消选中复选框

在html方面，我有以下内容

<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>
  ....

商店皮卡
....

然后我有一个表单的现有JS文件，它适用于除复选框之外的所有其他输入类型

$(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();
  });
});

$（文档）.ready（函数（）{
$（“#提交”_btn”）。单击（函数（）{
//获取输入字段值
var user_name=$（'input[name=name]'）。val（）；
var user_email=$（'input[name=email]'）。val（）；
var user_message=$（'textarea[name=message]'）。val（）；
//客户端的简单验证
//如果字段为空，我们只需使用.css（）将边框颜色更改为红色
var=true；
如果（用户名==“”）{
$（'input[name=name]'）.css（'border-color'，'#e41919'）；
继续=错误；
}
如果（用户\电子邮件==“”）{
$（'input[name=email]'）.css（'border-color'，'#e41919'）；
继续=错误；
}
如果（用户消息==“”）{
$（'textarea[name=message]'）.css（'border-color'，'#e41919'）；
继续=错误；
}
//一切看起来都很好！继续。。。
如果（继续）{
//要发送到服务器的数据
post_数据={
“用户名”：用户名，
“用户电子邮件”：用户电子邮件，
“userMessage”：用户消息
};
//Ajax将数据发布到服务器
$.post（'contact_business.php'，post_数据，函数（响应）{
//从服务器加载json数据并输出消息
如果（response.type==“error”）{
输出=“”+response.text+“”；
}
否则{
输出=“”+response.text+“”；
//重置所有输入字段中的值
$（'#联系形式输入'）.val（''）；
$（“#联系形式文本区域”）.val（“”）；
//$（'store#u pickup'）.attr（'checked'，false）；
//$（“#商店#皮卡”）.prop（'checked'，false）；
}
$（“#结果”）.hide（）.html（输出）.slideDown（）；
}“json”）；
}
返回false；
});
//重置以前设置的边框颜色并隐藏.keyup（）上的所有消息
$（“#联系人表单输入，#联系人表单文本区域”）.keyup（函数（）{
$（“#联系人表单输入，#联系人表单文本区域”）.css（'border-color'，''）；
//$（“#商店#皮卡”）.attr（'checked'，false）；
//$（“#商店#皮卡”）.prop（'checked'，false）；
$（“#结果”）.slideUp（）；
});
});

---

我已经尝试了下面两个在代码中注释掉的语句，但是这些都不起作用，有人可以帮助我吗。谢谢大家!

控制复选框是否被选中的是

checked

属性是否存在。设置属性的值无效

所以你需要

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

---

您可以通过以下方式切换type=“checkbox”HTML输入的选中属性

您可以使用检查复选框的checked属性的当前状态

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

$( elem ).prop('checked')

您还可以使用Chrome Inspect工具查看/测试DOM元素的当前属性，方法是选择该元素，然后查看“属性”选项卡。

---

注意：在我的Chrome版本中，我必须取消选择，然后重新选择DOM元素，以便在使用上述JS修改属性值后看到属性刷新

请提供您的问题的最小可验证示例。您已经为我们提供了完整的JavaScript代码，但只是表单的一部分。要么提供剩下的HTML，要么编写一个只查看复选框的新JavaScript；我混淆了$.attr（）和$.prop（）。我已经编辑了关于Chrome Inspector的回答。参考1）参考2）