ホームページ > ウェブフロントエンド > jsチュートリアル > jquery チェックボックス すべて選択/キャンセル example_jquery

jquery チェックボックス すべて選択/キャンセル example_jquery

WBOY
リリース: 2016-05-16 17:05:58
オリジナル
870 人が閲覧しました

機能:

a: チェックボックスをクリックするときに、すべてのサブチェックボックスを選択し、クリックしてすべてのチェックボックスの選択状態を解除します

b: 1 つの子のチェックボックスが選択され、親のチェックボックスが選択され、すべての子のチェックボックスがオフになった場合、親のチェックボックスがオフになります

コードをコピー コードは次のとおりです:

/**
* すべての関数を選択
* @param mainId メインチ​​ェックボックス ID
* @param 下位チェックボックスの klass クラス
*/
function selectAll(mainId,klass){
$("." klass).each(function(){
if($("#" mainId).attr("checked")== "チェック済み"){
$(this).attr("checked", "checked");
}
else{
$(this).removeAttr("checked");
}
});
}

上記はすべてのサブチェックボックスの選択と解除を実装しています。データの実装としては、コントローラーでチェックボックスの配列を受け取るだけです。

コードをコピー コードは次のとおりです:

/**
* 子チェックボックスのいずれかで親チェックボックスが選択されている場合は、それを選択します
すべての子チェックボックスのチェックを外し、親チェックボックスのチェックを外します
* @param Father 親チェックボックスの ID
* @param Sonサブチェックボックスクラス
*/
function checkSonCheckBox(父,息子){
$("." 息子).click(function(){
if($(this).attr("checked")== "checked"){
$(this).addClass("checked");
}else{
$(this).removeClass("checked");
}
if($("." son).hasClass("checked")){
$("#" Father).attr("checked","checked");
// console.log("少なくとも 1 つのサブチェックボックスはselected!" );
}else{
$("#" Father).removeAttr("checked");
// console.log("すべてのサブチェックボックスがオフになっています!");
}
});
};

上記の実装: 1 つの子のチェックボックスが選択され、親のチェックボックスが選択され、すべての子のチェックボックスがオフになっている場合、親のチェックボックスはオフになります

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート