Question

我试图在提交表单后取消选中一个复选框

在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文件，适用于所有其他输入类型，但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();
  });
});

我已经尝试了以下两个在代码中注释掉的声明，但这些不起作用，任何人都可以帮助我。谢谢！

Answer 1

您可以切换键入=＆＃34;复选框＆＃34;的HTML输入的已检查的attr。与

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

您可以使用

检查复选框的checked属性的当前状态

$( elem ).prop('checked')

您还可以使用Chrome Inspect工具查看/测试DOM元素的当前属性，方法是选择元素，然后查看＆＃39;属性＆＃39;标签。 https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

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

Answer 2

是否存在checked属性，该属性控制是否选中该复选框。设置属性的值无效。

所以你需要

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

无法取消选中复选框

2 个答案: