JQueryを使用してチェックボックスを設定する-javascript、jquery、checkbox

多数のチェックボックスを含む動的フォームがあります。クリックするとフォーム内のすべてのボックスが自動的にチェックされる「すべて選択」メソッドを作成したいと思います。

[x] select all //<input type="checkbox" id="select-all"> Select all

[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">

[submit]

私のjQueryは次のとおりです。

$(document).ready(function(){
$("#select-all").click(function() {
if (this.checked)
{
console.log("Check detected");

$(".checkbox1").each(function() {
console.log("Checking the item with value:" + this.value );
$(this).prop("checked", true);
console.log(this);

});

} else {
console.log("not checked");
}
});

}）;

私のコンソール出力：

> Check detected
> Checking the item with value:1
> <input type=​"checkbox" id=​"1" class=​"checkbox1" value=​"1">​
> Checking the item with value:2
> <input type=​"checkbox" id=​"2" class=​"checkbox1" value=​"2">​

各項目をループできますが、実際にチェックボックスをオンに設定する方法がわかりません。

私が苦労している部分は、チェックされた状態の実際の設定です、私は使用する必要があることを知っています：.prop（ "checked"、true）しかし、実際の要素には何を使用しますか？ $（this）は明らかに機能しません...

$(this).prop("checked", true);

回答：

この単純なコードを使用する

$(".checkAll").change(function(){
$(".checkbox1").prop("checked", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />

<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />

あなたが参照しています #select-all として (this.checked) 、として参照する必要があります $(this).

第二にあなたが使用することができます ：チェックあり チェックされているかどうかを確認します。

第三に、ループする必要はありません $(".checkbox1")。 jqueryはすべての要素に一致し、属性を更新します。

以下は役立つかもしれないスニペットです

$(document).ready(function() {
$("#select-all").click(function() {
if ($(this).is(":checked")) {
console.log("Check detected");
$(".checkbox1").prop("checked", true)
} else {
$(".checkbox1").prop("checked", false)
}
});
// If select-all is selected and if one check box is unchecked ,
//then select-all will be unchecked
$(".checkbox1").click(function(event) {
if ($(this).is(":checked")) {
// #select-all must be checked when all checkbox are checked
} else {
if ($("#select-all").is(":checked")) {
$("#select-all").prop("checked", false)
}
}
})
});

JSFIDDLE

デモリンク

JSコード

$(".checkbox1").click(function(event) {
var _this = $(this);
if (!_this.prop("checked")) {
$("#select-all").prop("checked", false)
}
})

$("#select-all").click(function() {

var _this = $(this);
var _value = _this.prop("checked");
console.log("Check detected");

$(".checkbox1").each(function() {
console.log("Checking the item with value:" + this.value);
$(this).prop("checked", _value);
console.log(this);

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all

<input type="checkbox" id="1" class="checkbox1" value="1">

<input type="checkbox" id="2" class="checkbox1" value="2">

この質問に答えるだけです。 提供されているさまざまなソリューションを試しましたが、機能していないようです。しかし、Jquery Uniformを使用しているため、表示を正しく機能させるためにコードを追加する必要があることに気付きました。

この郵便受け 役に立った

回答に時間を割いてくださったすべての人に感謝します。

私の最終的なコード：

$(document).ready(function(){
$("#select-all").click(function() {
if (this.checked)
{
$(".checkbox1").prop("checked", true);

} else {
$(".checkbox1").prop("checked", false);
}
$.uniform.update(".checkbox1");
});
});