代码之家  ›  专栏  ›  技术社区  ›  Noble-Surfer

javascript-清除HTML隐藏部分中复选框的值

  •  0
  • Noble-Surfer  · 技术社区  · 7 年前

    我有一个网页表单显示了许多问题。最近有报道称,在表格的条件部分显示的一个问题是,当用于显示该问题的条件被满足、然后没有满足和再次满足时,保留其值。

    也就是说,如果用户对问题1回答“是”,问题1a&1b将被显示;如果他们将问题1的答案更改为“否”,问题1a&1b将被隐藏;但是如果他们将问题1的答案更改回“是”,问题1a&1b将再次显示,并且之前给出的答案仍处于选中状态。1a&1b一旦再次隐藏和显示,则应返回空白/空值。

    如果(a)和(b)是具有以下代码的下拉表单元素,则当隐藏并重新显示时,我设法将(a)和(b)部分的答案清空:

    function() {
        var hiddenF = "conbox_" + ID;
        var hiddenwrapper = $("." + hiddenF).css('display', 'none');
        var dd = hiddenwrapper.children('select[id^="dropdown"]');
        dd.val('');
        ...
    }
    

    但是,表单由许多不同类型的字段组成,我当前在清除复选框列表的所选选项(可以选择多个复选框)时遇到了一些困难。

    我试图用与下拉列表类似的方式清除选择:

    var cb = hiddenwrapper.children('select[id^="checkbox"]');
    cb.checked = false;
    

    但是,当我通过选择“是”和“否”作为问题1的答案来隐藏并重新显示带有复选框“答案”的问题时,重新显示问题时仍会选中以前选中的复选框。

    我添加的用于显示 cb.checked 将其设置为false后,会显示其值为false,但复选框本身实际上仍处于选中状态:

    CB:

    检查:假

    长度:0

    当问题隐藏并重新显示时,如何清除选中的复选框?

    编辑

    显示此内容的页面的HTML为:

    <body id="container">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div class="main">
                <div class="maincontent">
                    <asp:Panel ID="Panel2" runat="server">
                        ...
                    </asp:Panel>
    
                    <asp:Panel ID="Panel1" runat="server">
                    </asp:Panel>
                </div>
            </div>
        </form>
    </body>
    

    表单显示在面板1中。

    为此面板生成的HTML是:

    <div id="Panel1">
    
        <div id="ReportPanel1" class="hide">
            <span id="section1"><h3>1) Intro</h3></span><span id="section1_1"><p><b>Is Today Monday? <span class='red'>*</span></b></p></span><div class="radiobox">
                <table id="radio1_1" border="0">
                    <tr>
                        <td><input id="radio1_1_0" type="radio" name="radio1_1" value="Yes" data-validation="required" onchange="showhiddenconditions(radio1_1,&#39;radio&#39;);" data-aid="396439" /><label for="radio1_1_0">Yes</label></td>
                    </tr><tr>
                        <td><input id="radio1_1_1" type="radio" name="radio1_1" value="No" data-validation="required" onchange="showhiddenconditions(radio1_1,&#39;radio&#39;);" data-aid="396440" /><label for="radio1_1_1">No</label></td>
                    </tr>
                </table>
            </div><div id="conbox_1_2_396439" class="conbox_396439" style="display:none">
                <span id="section1_2"><p><b>Which games did you watch? </b></p></span><div class="radiobox">
                    <table id="checkbox1_2" class="textbox3" border="0">
                        <tr>
                            <td><input id="checkbox1_2_0" type="checkbox" name="checkbox1_2$0" /><label for="checkbox1_2_0">Wales</label></td>
                        </tr><tr>
                            <td><input id="checkbox1_2_1" type="checkbox" name="checkbox1_2$1" /><label for="checkbox1_2_1">England</label></td>
                        </tr><tr>
                            <td><input id="checkbox1_2_2" type="checkbox" name="checkbox1_2$2" /><label for="checkbox1_2_2">Scotland</label></td>
                        </tr><tr>
                            <td><input id="checkbox1_2_3" type="checkbox" name="checkbox1_2$3" /><label for="checkbox1_2_3">Ireland</label></td>
                        </tr><tr>
                            <td><input id="checkbox1_2_4" type="checkbox" name="checkbox1_2$4" /><label for="checkbox1_2_4">France</label></td>
                        </tr><tr>
                            <td><input id="checkbox1_2_5" type="checkbox" name="checkbox1_2$5" /><label for="checkbox1_2_5">Italy</label></td>
                        </tr>
                    </table>
                </div>
            </div><div id="conbox_1_3_396439" class="conbox_396439" data-type="drop" data-control="dropdown1_3" style="display:none">
                <span id="section1_3"><p><b>Did you watch the rugby? <span class='red'>*</span></b></p></span><input type="hidden" name="HiddenRequired_1_3_396439" id="HiddenRequired_1_3_396439" value="dropdown1_3" /><select name="dropdown1_3" id="dropdown1_3" class="textbox3">
                    <option value="">...</option>
                    <option value="396443">No</option>
                    <option value="396444">Yes</option>
    
                </select>
            </div><div id="conbox_1_4_396439" class="conbox_396439" data-type="drop" data-control="dropdown1_4" style="display:none">
                <span id="section1_4"><p><b>Did you have a good weekend? </b></p></span><select name="dropdown1_4" id="dropdown1_4" class="textbox3">
                    <option value="">...</option>
                    <option value="396442">No</option>
                    <option value="396441">Yes</option>
    
                </select>
            </div><input type="submit" name="next1" value="Submit >" id="next1" class="buttonSubmit loginoveride2" />
        </div>
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   HaukurHaf    7 年前

    使用jquery选中/取消选中复选框的正确方法是 .prop() 方法。

    http://api.jquery.com/prop/

    所以应该是这样的:

    var cb = hiddenwrapper.children('select[id^="checkbox"]');
    cb.prop('checked', false);