使用JQuery和Metronic選中了ASP.NET MVC復選框集

Question

因此，我有一個要為asp.net mvc項目構建的表單，並且我有一個復選框，該復選框的頂部是一個復選框，基本上應該是下面的復選框的“全選”。 jQuery應該很簡單地做到這一點...但是，它不起作用。

jQuery的：

$("#SelectAll").change(function () {
    if ($(this).is(':checked')) {
        $('#Option1').prop('checked', true);
    }
    else {
        $('#Option1').prop('checked', false);
    }
});

我嘗試了多種選擇復選框的方法：

$('#Option1').attr('checked', true);

$('input[type="checkbox"][id="Option1"]').attr("checked", true);

這些都不起作用。 我單擊“全選”復選框，而其他復選框則完全不變。

另外，我在視圖中使用Bootstrap，在表單中使用JQuery Validation，但不在復選框中使用。

視圖：

<div class="form-group">
    <label class="col-md-3 control-label">Option1:</label>
    <div class="col-md-1" style="margin-top:7px;">
        @Html.CheckBoxFor(model => model.Option1, new { @class = "form-control" })
    </div>
</div>

編輯：忘記添加我正在使用Metronic模板。

Answer 1

全部選中后，請選中復選框“ Option1”的選中屬性。 像這樣：

$（'＃Option1'）。prop（'checked'）;

全選后，在控制台中運行此命令，然后查看checked屬性的值是什么。 這將使您了解發生了什么。 您的代碼是否實際有效。

既然您說您正在使用引導，我必須問您是否正在使用某些主題？ 通常，主題為表單控件預先安裝了jQuery Uniform等插件，其呈現方式與普通復選框控件不同。 因此，即使您更新控件的checked屬性，它也不會呈現它，直到您使用呈現它的插件更新它為止。

編輯：OP評論說他正在使用Metronic。 所以我的想法是對的，他使用的主題未呈現復選框。 解決方案是調用Metronic.updateUniform（$（checkbox））;。 更新selectAll上每個復選框的選中屬性后。

Answer 2

嘗試這個：

$("#SelectAll").click(function () {
    if ($(this)[0].checked) {
       $('input[type="checkbox"][name*="option"]').attr('checked', true);
    }
    else {
       $('input[type="checkbox"][name*="option"]').attr('checked', false);
    }
});

Answer 3

下面是一個工作示例（帶有3個隨機的“選項”復選框），用於選擇所有帶有jQuery的復選框。 本示例假定您使用的是jQuery 1.6或更高版本。 由於這與您的代碼相似，因此我認為您的標記不正確，或者您遇到了我們無法在此處看到的其他類型的JavaScript錯誤。 此外，代碼已簡化為基於SelectAll復選框的“已檢查”狀態，將所有帶有“ form-control”類的復選框設置為選中或不選中。

  $(function(){ $("#SelectAll").on("change", function(){ $("input[type=checkbox][class=form-control]").prop("checked", $(this).is(":checked")); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Change All <input type="checkbox" id="SelectAll"/><br/><br/> Option1: <input type="checkbox" id="Option1" class="form-control"/><br/> Option2: <input type="checkbox" id="Option2" class="form-control"/><br/> Option3: <input type="checkbox" id="Option3" class="form-control"/><br/>

Answer 4

如果您使用的是metronic，則應在prop之后添加以下行：

$.uniform.update();

Answer 5

本示例可以為您提供幫助：

<script  runat="server">
 Sub Check(sender As Object, e As EventArgs) 
 if check1.Checked then
   work.Text=home.Text
 else
   work.Text=""
 end if
 End Sub
</script>

<!DOCTYPE html>
<html>
<body>

<form runat="server">
<p>Home Phone:
<asp:TextBox id="home" runat="server" />
<br>
Work Phone:
<asp:TextBox id="work" runat="server" />
<asp:CheckBox id="check1"
Text="Same as home phone" TextAlign="Right"
AutoPostBack="True" OnCheckedChanged="Check"
runat="server" />
</p>
</form>

</body>
</html>

在這里鏈接。

我的想法是在服務器端使用復選框。

使用JQuery和Metronic選中了ASP.NET MVC復選框集

問題描述

5 個解決方案

解決方案1
1 已采納 2014-11-26 17:32:45

解決方案2
0 2014-11-26 16:59:15

解決方案3
0 2014-11-26 17:06:16

解決方案4
0 2015-08-31 18:35:39

解決方案5
-1 2014-11-26 17:18:04

使用JQuery和Metronic選中了ASP.NET MVC復選框集

問題描述

5 個解決方案

解決方案1 1 已采納 2014-11-26 17:32:45

解決方案2 0 2014-11-26 16:59:15

解決方案3 0 2014-11-26 17:06:16

解決方案4 0 2015-08-31 18:35:39

解決方案5 -1 2014-11-26 17:18:04

解決方案1
1 已采納 2014-11-26 17:32:45

解決方案2
0 2014-11-26 16:59:15

解決方案3
0 2014-11-26 17:06:16

解決方案4
0 2015-08-31 18:35:39

解決方案5
-1 2014-11-26 17:18:04