Question

我正在尝试使用一个名为toggle的按钮来切换一系列复选框。我认为id正确地编写了代码，但是当运行时我点击按钮没有任何反应，有人能告诉我我错过了什么吗？

JQuery的：

 $("toggle").click(function () {
        if ($("[name=checks]:visible").length)
            $("[name=checks]").hide;
        else
            $("[name=checks]").show
    });

模态：

<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                            <h4 class="modal-title" id="myModalLabel">Summary</h4>
                        </div>
                        <div class="modal-body">
                            <h2>Results</h2>
                            <h5>Testing</h5>
                            <span id="printCode"></span><br />

                            <div class="pull-right"><button type="submit" class="btn btn-success" id="toggle">Toggle</button> </div>

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Date</th>
                                        <th>Test Type</th>
                                    </tr>
                                </thead>
                                <tbody>                               
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="checks">
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.CreationDateTime)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.AppModeId)
                                            </td>
                                        </tr>
                                    }                                                                 
                                </tbody>
                            </table>

                            <div class="form-group">
                                <div class="col-xs-offset-2 col-xs-10">
                                    <a href="#" class="btn btn-success"
                                       data-toggle="modal"
                                       data-target="#basicModal3" id="resultsgo">Go!</a>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success">Save changes</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

                        </div>
                    </div>
                </div>
            </div>

Answer 1

而不是

$("toggle").click(function () {

写这个

$("#toggle").click(function () {    //<----use '#' id selector here

编辑： -

 $("#toggle").click(function () {
    if ($("[name=checks]").is(":visible"))
        $("[name=checks]").hide();  //<---- use .hide() and not .hide (Use .hide() as a method)
    else
        $("[name=checks]").show();  //<---- use .show() and not .show (Use .show() as a method)
 });

编辑： -

Working Demo

Answer 2

尝试 JQuery Toggle 功能来完成此任务：

$(function(){
    $("#toggle").click(function () {
        $("[name=checks]").toggle();
    });
});

使用$("#toggle")代替$("toggle")

Answer 3

试试这个：

$("[name=checks]").is(":visible").toggle();

Answer 4

检查一下： DEMO

<input type="checkbox" name="checks">
<input type="checkbox" name="checks">
<input type="checkbox" name="checks">
<input type="checkbox" name="checks">
<input type="checkbox" name="checks">
<input type="checkbox" name="checks">
<br>
<button id="testToggle">toggle</button>

$(function() {
    $("#testToggle").on("click", function () {
        $("[name=checks]").toggle();     
    });
});

MVC：使用JQuery在模态中切换复选框可见性

4 个答案: