单击取消按钮后清除选中的复选框答案

【问题标题】：clear checked check box after clicking cancel button单击取消按钮后清除选中的复选框
【发布时间】：2013-06-06 04:46:08
【问题描述】：

html:

<div id="member_form" style="display:none">
    <form id="contactform"  method="post" action="." onsubmit="if($('input[name=name]').is(':checked')){return true;}else{$('#choose_warning').show();return false}">
        {% csrf_token %}
        <h2> Choose Person</h2>
        <br />
        {% if contact_list %}
        {%for contact in contact_list%}
        <input type="radio" name="name" id="contact" value="{{contact.first_name}} {{contact.last_name}}" maxlength="30" />
        {{contact.first_name|title}} {{contact.last_name}}<br />
        {% endfor %}
         <input type="hidden" name="action_type" value="" id="member_action_type" maxlength="30" />
        <p style="display:none;color:red" id="choose_warning">Please choose a contact.</p>
        <div style="width:180px;margin:20px 5px 0 10px" align="left">
            <button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">
                <img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
            Cancel</button>  {% include "buttons/add.html" %}
        </div></form>

js:

$(document).ready(function(){
         $(".add_list").click(function(){
             '''''''
         $("#member_form").fadeIn(1000);
       });
      $(".close").click(function(){
         $("#member_form").fadeOut(500);
        });
    });

我的问题是如果我选择一个单选按钮并按取消，如果我打开弹出窗口而不刷新，所选单选按钮处于选中模式，我希望它是清晰的，如果我单击取消按钮并打开弹出窗口，怎么做呢。

【问题讨论】：

发布一个包含您的代码的 jsFiddle 链接。
您的 HTML 无效。我知道这是您发布的服务器端代码，但那不是真正的 HTML。
@adeneo，这是 Django，他已经正确地将这篇文章标记为 Django！
@ElmoVanKielmo - 它仍然不是 HTML

标签： javascript jquery html css django

【解决方案1】：

现在它会清除所有无线电：

$(".close").click(function(){
     $("input:radio").prop("checked", false);
     $("#member_form").fadeOut(500);
});

【讨论】：

，它为循环中的第一个单选按钮工作，其他第一个不工作（不清除）

【解决方案2】：

只需将此代码用于您的查询，根据您的用途编辑按钮的名称。它会正常工作。

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery Check/Uncheck Radio Button</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".check-male").click(function(){
            $("#male").prop("checked", true);
        });
        $(".check-female").click(function(){
            $("#female").prop("checked", true);
        });
          $(".cancel").click(function(){
            $("#female").prop("checked", false);
              $("#male").prop("checked", false);
        });
    });
    </script>
    </head>
    <body>
        <label><input type="radio" name="gender" id="male"> Male</label>
        <label><input type="radio" name="gender" id="female"> Female</label>

         <button type="button" class="cancel">Cancel</button>
        <p><strong>Note:</strong> Click the cancel uncheck radio button.</p>  
    </body>
    </html>

【讨论】：