0

次のように、フォームに一連のチェックボックスがあります。

<form name="form1" onsubmit="return window.Validate()" method="post" action="myprog.cgi">
    <div id="filters"> 
        <input name="One_f" type="checkbox"> No. 1<br> 
        <input name="Two_f" type="checkbox"> No. 2<br> 
        <input name="Three_f" type="checkbox"> No. 3<br>
    </div>
    <div id="Colors">
        <input name="Red" type="checkbox"> Red<br> 
        <input name="Blue" type="checkbox"> Blue<br> 
        <input name="Green" type="checkbox"> Green<br>
    </div>
    <div id="Button">
        <input name="Submit" value="Submit" type="submit">
    </div>
</form>

Validatediv id のチェックボックスのいずれかがチェックされているかどうかを確認 する関数を Javascript で作成したいと考えていfiltersます。それらのいずれもチェックされていない場合は、警告ボックスが表示され、cgi が実行されないようにする必要があります。div のチェックボックスのfilters名前はすべて_f、それが役立つ場合は で終わります。そのような関数をどのように書くのですか?

4

1 に答える 1

3

これがjQueryソリューションです。すぐにプレーンJSを追加します。

$('form[name="form1"]').on('submit', function(e) {
    if(!$('#filters input:checkbox:checked').length) {
        e.preventDefault();
        alert('Please select at least one filter.');
    }
});

このコードはインラインイベントを必要としません。onsubmit

あなたはjQueryに精通していないので、私はそれをより徹底的に説明します：

  • $('form[name="form1"]')セレクターに一致するすべての要素を含むjQueryオブジェクトを作成します。id="form1"フォームを提出して使用した方が速いでしょう$('#form1')
  • .on()イベントハンドラーをバインドします。コールバック関数に渡される最初の引数はラップされたイベントオブジェクトであり、必要に応じてフォームが送信されないようにする必要があります。
  • $('#filters input:checkbox:checked')の子であるすべてのチェックボックスを選択します#filters。:checkboxおよび:checkedは、現在チェックされているチェックボックスにのみ一致する疑似セレクターです）
  • .lengthjQueryオブジェクトの要素数です-何もチェックされていない場合はゼロです
  • e.preventDefault();イベントのデフォルトのアクションが実行されないようにします。つまり、フォームは送信されません。

$(document).ready(function() { ... });通常、DOMの準備ができたらすぐに実行するようにコード全体をラップします。ただし、フォーム<script>のタグの後にコードを含むタグを配置する場合</form>は、必須ではありません。

プレーンなJSソリューションが本当に必要な場合は、次のことを試してください。

function Validate() {
    var container = document.getElementById('filters');
    var checked = 0;
    for(var i = 0; i < container.childNodes.length; i++) {
        var elem = container.childNodes[i];
        if(elem.tagName == 'INPUT' && elem.type == 'checkbox' && elem.checked) {
            checked++;
        }
    };
    if(checked) {
        return true;
    }
    alert('Please select at least one filter.');
    return false;
}
于 2012-06-02T11:23:57.320 に答える