Question

我已经用xhtml编写代码来提交复选框数据，重置复选框数据..

我的表单数据是

    <div class="outer">
        <div class="pg15outer">
            <div class="pgleft">
                <p class=" pg2text"><img src="images/icon_assess.png" alt="images" /></p>
            </div>

            <div class="pgrgt pg2text">


                <p class=""><span class="activespan">Self Assessment 3</span></p>

            </div>
        </div>

        <p class="text">Try to answer the following questions without referring to your notes. If you find this difficult then consult your notes and make sure you can answer the questions.</p>
        <div id="questionsNo_1_1">
            <!-- questionsNo_chapterNo_quesNo-->
            <p class="text" id="question1">1. An objective of record keeping is to ensure that a client of an accountable institution can be fully identified and located.</p>

            <!--<li><label for="ques11">&lt;javascript&gt;</label></li>-->

            <p class="text">
                <input type="checkbox" value="Yes" id="ques11" name="radiobutton" class="option_1" />
                <label for="ques11">True</label>
                <span class="hide" id="ans_1_1">Answer: True</span>
                <span id="rite11" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
                <span id="wrong11" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>

            <p class="text">
                <input type="checkbox" value="No" id="ques12" name="radiobutton" class="option_2" />
                <label for="ques12">False</label>
                <span id="rite12" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
                <span id="wrong12" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
        </div>
        <div id="questionsNo_1_2">
            <!-- questionsNo_chapterNo_quesNo-->
            <p class="text" id="question2">2. The records that an accountable institution is required to maintain and retain may be kept in either paper or electronic form.</p>

            <p class="text">
                <input type="checkbox" value="No" id="ques13" name="radiobutton" class="option_1" />
                <label for="ques13">True</label>
                <span id="rite13" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
                <span id="wrong13" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>

            <p class="text">
                <input type="checkbox" value="Yes" id="ques14" name="radiobutton" class="option_2" />
                <label for="ques14">False</label>
                <span class="hide" id="ans_1_2">Answer: False</span>
                <span id="rite14" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
                <span id="wrong14" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
        </div>
        <div id="mainalign">
            <span class="chk-btn button" onclick="" id="_submit">Submit</span>
            <span class="jumble-rst button" onclick="reset_fu(3)" style="margin-left:1%">Reset</span>
            <span class="button" onclick="checkans()">Answers</span>
        </div>
    </div>
    <p class="pg-no1">16</p>

在这里，有两个问题，每个包含两个复选框，我想一次只选择一个复选框，在此代码中选择两个复选框。对于提交和重置我写功能，重置不起作用，

  <script>
        function check(numQues) {

            for (var i = 1; i <= numQues; i++) {
                for (var j = 1; j <= 4; j++) {

                    document.getElementById("rite" + i + j).style.display = "none";
                    document.getElementById("wrong" + i + j).style.display = "none";

                    if (document.getElementById("ques" + i + j).checked) {
                        var result = document.getElementById("ques" + i + j).value;
                        if (result == 'yes')

                        {
                            document.getElementById("rite" + i + j).style.display = "inline";
                            document.getElementById("wrong" + i + j).style.display = "none";
                        } else {
                            document.getElementById("rite" + i + j).style.display = "none";
                            document.getElementById("wrong" + i + j).style.display = "inline";

                        }

                    }

                }

            }

        }


        function reset_fu(numQues) {
            for (var i = 1; i <= numQues; i++) {

                for (var j = 1; j <= 4; j++) {

                    document.getElementById("ques" + i + j).checked = "";
                    document.getElementById("rite" + i + j).style.display = "none";
                    document.getElementById("wrong" + i + j).style.display = "none";
                    document.getElementById("ans1").style.display = "none";
                    document.getElementById("ans2").style.display = "none";

                }

            }


        }



        function checkans() {
            document.getElementById("ans1").style.display = "inline";
            document.getElementById("ans2").style.display = "inline";

        }
    </script>

如何重置选中的复选框，每个问题只需选中一个复选框

Answer 1

这是一个简单的解决方案

$(document).ready(function(){

    $('#questionsNo_1_1 input:checkbox').click(function() {
    $('#questionsNo_1_1 input:checkbox').not(this).prop('checked', false);
});

$('#questionsNo_1_2 input:checkbox').click(function() {
    $('#questionsNo_1_2 input:checkbox').not(this).prop('checked', false);
});

});

<强> Here is the fiddle

由于我没有您定义的CSS类，因此样式无法应用

如何选择多个复选框并提交数据

1 个答案: