0

私は現在、ボックスがチェックされていない場合にエラーメッセージを表示するjavascript/jqueryコードを持っています。ただし、チェックボックスをオンにしてフォームを送信すると、エラーメッセージが引き続き表示されます。

どんな助けでも素晴らしいでしょう！

javascriptコード：

    var hobbies = $('#hobbies').val();
    if ($('#hobbies :checkbox:checked').length === 0){
    $("#multichk").after('<span class="error">Please choose at least one.</span>');
    hasError = true;
    }

htmlコード：

 <input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br />

 <input type='hidden' id='multichk' />

ありがとうございました。

4

2 に答える 2

2

チェックボックスに名前を付けて識別する方法では、それらは同じグループの一部にはならず、適切に識別されません。

ページ上の各要素は、識別されるときに一意のIDを持っている必要があり、チェックボックスのグループ、またはそのことについてはラジオボタンを検証してグループとして配信するには、グループの各メンバーが同じ名前を持っている必要があります。

これらのルールを考えると、ラベルタグの属性が要素の属性ではなくfor要素の属性を参照していることは当然のことです。idname

ここで、サーバー側の言語にPHPを使用していると推測しています（チェックボックス名の角かっこに基づく）。この場合、チェックボックスは次のように宣言する必要があります。

<input type='checkbox' id='hobbies0' name='hobbies[]' value='1'/>
<label for='hobbies0'>football</label><br />

<input type='checkbox' id='hobbies1' name='hobbies[]' value='2'/>
<label for='hobbies1'>soccer</label><br />

<input type='checkbox' id='hobbies2' name='hobbies[]' value='3'/>
<label for='hobbies2'>baseball</label><br />

<input type='checkbox' id='hobbies3' name='hobbies[]' value='4'/>
<label for='hobbies3'>tennis</label><br />

[注：コードボックスの水平スクロールを削除するために、ラベルは次の行にのみ移動しました]

HTMLをまっすぐにすると、jQueryは次のようになります。

if($('input:checkbox[name="hobbies[]"]:checked').length === 0){
    $("#multichk").after('<span class="error">Please choose at least one.</span>');
    hasError = true;
}

セレクターフォーマットのリファレンス

それでも問題が発生する場合は、角かっこに次のような二重の円記号を接頭辞として付ける必要があります。

if($('input:checkbox[name="hobbies\\[\\]"]:checked').length === 0){

二重円記号のリファレンス

お役に立てれば

于 2012-05-25T03:00:08.880 に答える
1

技術的には、HTMLは無効です。同じIDを持つ複数の要素は不正です。IDセレクターの代わりにクラスセレクターを使用する必要があります...

とにかく、最も簡単な方法は、そこにスパンを置き、誰かがチェックボックスをオンにしたときにそれをクリアすることです。

<input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br />

 <input type='hidden' id='multichk' />

 <span id="error_message" class="error"></span>

次に、あなたのjs：

var hobbies = $('#hobbies').val();
if ($('#hobbies:checked').length === 0) {
    $('#error_message').innerHTML('Please choose at least one.');
    hasError = true;
} else {
    $('#error_message').innerHTML('');
    hasError = false;
}

ハンドラーを設定することで、チェックボックスをクリックするたびにリセットできます。

function changed(checkbox) {
  return function() { 
    if (checkbox.checked) {
      $('#error_message').innerHTML('');
      hasError = false;
    }
  }
}

var checkboxes = document.querySelector('#hobbies')
for (var i=0; i<checkboxes.length; ++i) {
  checkboxes[i].onchange = changed(checkboxes[i]);

上記はアイデアです。このフィドルで動作するコード。

于 2012-05-25T02:50:45.897 に答える