1

JQuery を機能させることができないようです。すべてのモデルをテーブル形式で表示するループを持つビューを添付しました。各モデルの横にチェックボックスがあります。テーブル ヘッドには、checkAll としてチェックボックス アイテム名/ID もあります。JQuery スクリプトを参照し、関数を追加しました。checkAll チェックボックスをクリックしても何も起こりません。私はJQueryに非常に慣れていないので、これを解決できませんか?

@model IEnumerable<MVC_Example2___ADO.Models.Employees>

@{
    ViewBag.Title = "Delete";
}
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript" >
</script>
<script type="text/javascript">
    $(function () {
        $("#checkAll").click(function () {
            $("input[name='EmployeeIDToDelete']").click(function () {
                if ($("input[name='EmployeeIDToDelete']").length == $("input[name='EmployeeIDToDelete']:checked").length) {
                    $("#checkAll").attr("checked", "checked");
                }
                else {
                    $("#checkAll").removeAttr("checked");
                }
            })
        })
    })
</script>
<html>
<body>
    @using (Html.BeginForm())
    {
        <table align="center" border="1" style="border:ridge;">
            <thead>
                <tr>
                    <td><input type="checkbox" id="checkAll" name="checkAll" /> </td>
                    <td>Photo</td>
                    <td>Name</td>
                    <td>Gender</td>
                </tr>
            </thead>
            <tbody>
                @Html.EditorForModel()
            </tbody>
        </table>
        <input type="submit" name="submit" value="Delete Entries" />
    }
</body>
</html>
4

2 に答える 2

0

いくつかのこと：

  1. ヘッダー チェックボックスのクリックのハンドラー内に行チェックボックスのクリック ハンドラーを追加しているため、行からトリガーされるイベントはありません。
  2. attr()おそらく使用すべきときに不適切に使用していますprop()（プロパティと属性-これらは2つの異なるものです）。

これが私がこれを書く方法です：

$(function() {
  var $checkAll = $('#checkAll');
  var $inputs = $('input[name="EmployeeIDToDelete"]');
  
  $checkAll.click(function() {
    $inputs.prop('checked', this.checked);
  });

  $inputs.change(function() {
      $checkAll.prop('checked', $inputs.length == $inputs.filter(':checked').length);
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<input type="checkbox" id="checkAll" />

<hr />

<input type="checkbox" name="EmployeeIDToDelete" />
<br/>
<input type="checkbox" name="EmployeeIDToDelete" />
<br/>
<input type="checkbox" name="EmployeeIDToDelete" />
<br/>
<input type="checkbox" name="EmployeeIDToDelete" />
<br/>

于 2015-04-30T19:58:45.040 に答える
0

クリック ハンドラーをEmployeeIDToDeleteチェック/チェック解除するのではなく、追加しているので、それを削除します。の代わりに
使用propattr

    $("#checkAll").click(function () {
        //$("input[name='EmployeeIDToDelete']").click(function () {
            if ($("input[name='EmployeeIDToDelete']").length == $("input[name='EmployeeIDToDelete']:checked").length) {
                $("#checkAll").prop("checked", true);
            }
            else {
                $("#checkAll").prop("checked", false);
            }
        //})
    })
于 2015-04-30T19:57:11.897 に答える