jQuery に基づいて、question_jquery に回答するためにチェックボックスがオンになっているかどうかを実装します。-jsチュートリアル-php.cn

jQuery に基づいて、question_jquery に回答するためにチェックボックスがオンになっているかどうかを実装します。

WBOY

リリース： 2016-05-16 15:26:17

オリジナル

1230 人が閲覧しました

最近、プロジェクト要件で発生した機能ポイントには、ユーザーが選択したオプションに応じて、対応するプロンプトが表示されます。テストプログラムのレンダリングが非常に満足しているかどうかを確認してください。引き続き記事全文をご覧ください。

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("请选择一个选项再提交");
}elsif($("#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 に基づいて、チェックボックスが選択されているかどうかを確認するための関連情報を実装しています。