MVC：使用JQuery在模式下切換復選框可見性

Question

我正在嘗試使用名為“切換”的按鈕來切換一系列復選框。 我以為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)
 });

編輯：-

工作演示

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();     
    });
});