0

私はjQueryの初心者で、特にチェックボックスを送信する前にフォームを検証する方法を知りたいと思っていました.

ユーザーがそのステップを完了した場合にチェックボックスをオンにする簡単なチェックリストフォームを作成しています。私が計画しているのは、「チェックされていない」チェックボックスがある場合、スクリプトはフォームの送信を防ぎ、色で強調表示することです。

これが私のコードです:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
      .error {
        background-color: #F00;
      }
      .valid {
        background-color: #0F0;
      }
    </style>
    <script type="application/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">    </script>
    <script type="application/javascript">
      $('#button').on('click', function() {
        var $checkboxes = $('.container [type=checkbox]');

        $checkboxes.filter(':checked').parent().removeClass('error').addClass('valid');
        $checkboxes.not(':checked').parent().removeClass('valid').addClass('error');
      });
    </script>
  </head>

  <body>
    <div class="container">
      <input class="tick" id="option1" type="checkbox">
    </div>
    <div class="container">
      <input class="tick" id="option1" type="checkbox">
    </div>
    <input id="button" type="button" value="check">
  </body>
</html>

ここで私がしようとしているのは、ユーザーがボタンをクリックすると、スクリプトはチェックされていないチェックボックスをすべて赤で強調表示し、チェックされているすべてのチェックボックスを緑で強調表示します。

ただし、スクリプトが機能していません。スクリプトの何が問題になっていますか? これを行うためのより効率的な方法に関する提案はありますか?

4

5 に答える 5

2

次のことを試してください。

$(document).ready(function(){
    var len = $('input[type=checkbox]').length;

    $('#button').click(function(e){
        var $cb = $('input[type=checkbox]');
        $cb.filter(':checked').parent().removeClass('error');
        var not = $cb.not(':checked').parent().addClass('error').length;
        if (len == not) {
            e.preventDefault(); // prevent the default action of the event
        }
    })​
})

http://jsfiddle.net/2dcPE/

マークアップは無効であることに注意してください。IDは一意である必要があります。

于 2012-09-27T03:32:18.953 に答える
1

id同じ属性を持つ複数の要素があります。idは一意であり、1つの要素を参照する必要があります。複数の要素をグループ化する場合は、class代わりに属性を使用してください。

また、を使用してイベントをバインドしないでくださいonclick。jQuery.on('click'ハンドラーを使用するだけです。

HTML：

<div class="container">
    <input class="tick" id="option1" type="checkbox" />
</div>

<div class="container">
    <input class="tick" id="option2" type="checkbox" />
</div>

<input id="button" type="button" value="check" />​

JavaScript：

$('#button').on('click', function() {
    var $checkboxes = $('.container [type=checkbox]');

    $checkboxes.filter(':checked').parent().removeClass('error').addClass('valid');
    $checkboxes.not(':checked').parent().removeClass('valid').addClass('error');
});​

デモ： http： //jsfiddle.net/Blender/fzZFz/3/

于 2012-09-27T03:37:52.110 に答える
0 
function validateAll() {
    $(".tick").each(function(index, item) {
        if ($(this).is(":checked")) {
            $(this).parent().removeClass().addClass('valid');
        } else {
            $(this).parent().removeClass().addClass('error');
        }
    });
}
于 2012-09-27T03:44:15.447 に答える
0

これを試して

function validateAll(){
    $('.tick').each(function(){
        if(this.checked){
            $(this).closest('#container').addClass('valid');
        }else{
            $(this).closest('#container').addClass('error');
        }
        });
    }

ライブフィドルを見る

于 2012-09-27T03:35:46.063 に答える
0

いくつかのこと：

1.）同じID（コンテナ）を持つ複数の要素があります。これは無効なhtmlであり、jqueryはIDで検索したときに最初に見つかった要素のみを返します。

2.）ユーザーがチェックボタンをクリックした後にのみ、イベントを変更にバインドします。.tick changeイベントにバインドして、ユーザーがアイテムをチェックしているときに検証することができると思います。

3.）あなたの論理は検証のために後方にありました。すべてが有効なときにエラー条件を追加していました。

最終的なjsはこれです：

    $(".tick").change(function(){
        if ($('.tick:checked').length == $('.tick').length) {
            $('.container').removeClass("error");
            $('.container').addClass('valid');
        } else {
            $('.container').removeClass("valid");
            $('.container').addClass('error');
        }
});    ​

重複するIDを削除するために、htmlを少し調整します。

<div class="container"><input class="tick" id="option1" type="checkbox"></div>
<div class="container"><input class="tick" id="option1" type="checkbox"></div>

このフィドルを参照してください：http： //jsfiddle.net/johnkoer/225Ty/5/

于 2012-09-27T03:36:15.463 に答える