jquery は、チェックボックスが選択されているかどうかを判断し、質問に答えるための特殊効果を実行します

jquery は、チェックボックスが選択されているかどうかを判断し、質問に答えるための特殊効果を実行します_jquery

WBOY

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

オリジナル

1411 人が閲覧しました

この記事の例では、チェックボックスがオンになっているかどうかを判断し、回答を求める 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 プログラミングを学ぶすべての人に役立つことを願っています。