ホームページ >ウェブフロントエンド >jsチュートリアル >jquery は、チェック ボックスが選択されているかどうかを判断し、質問に答えるための特殊効果を実行します_jquery
jquery は、チェック ボックスが選択されているかどうかを判断し、質問に答えるための特殊効果を実行します_jquery
- WBOYオリジナル
- 2016-05-16 15:26:471391ブラウズ
この記事の例では、チェック ボックスがオンになっているかどうかを判断し、回答を求める jquery の特殊効果コードを説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:
具体的なコードは次のとおりです:
1. 実装の原則:
ステップ 1: ユーザーがどの項目を選択するか、つまりどのチェック ボックスがオンになっているかを判断します
ステップ 2: チェックボックスの選択に基づいて、対応するプロンプトを表示します
2. メインプログラムを見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="checkbox" id="checkbox01" />A <br />
<input type="checkbox" id="checkbox02" />B <br />
<input type="checkbox" id="checkbox03" />C <br />
<input type="checkbox" id="checkbox04" />D <br />
<input type="button" id="button" value="提交" />
<h4 >提示本题是单选题且正确答案是A</h4>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
上記のことから、この質問は多肢選択問題であり、正解は A であると仮定し、JQ を使用して実装を開始することもわかります~~~
3. jQuery プログラム
$(function(){
//假设正确答案是A
$("#button").click(function(){
if($("input").filter(":checked").length==0){
alert("请选择一个选项再提交");
}else if($("#checkbox01").filter(":checked").length!=0&&$("#checkbox02").filter(":checked").length==0&&$("#checkbox03").filter(":checked").length==0&&$("#checkbox04").filter(":checked").length==0){
alert("您选择的答案是正确的！")
}else{
alert("您选择的答案是错误的！")
}
})
})
チェックボックスがオンになっているかどうかを判断するプログラムをインターネット上でたくさん見ましたが、そのほとんどは、おそらく jquery のバージョンの更新によって多くのプログラムが削除されたことが原因です。 $("#id ").filter(":checked").length==0 を使用しました。どのオプションが選択されテストされているかを判断することができます。
この記事が jQuery プログラミングを学ぶすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。