0

登録フォームに次のようなチェックボックスがあります。

<form name="reg" id="reg" method="post">
   <input type="checkbox" onclick="return validate('tos')" name="tos"/>
</form>

そして、私はJSを使用して、チェックマークが付いているかどうかを確認し、チェックマークが付いている場合は、フォームに緑色のチェックマークを表示します。ただし、クリックしたときに実際にはチェックボックスがオンになっていないが、緑色のチェックボックスが読み込まれています。

さらに、もう一度クリックしても、ユーザーがチェックボックスを効果的にオフにしているため、本来あるべき緑色のチェックマークは削除されません。

だから私のJSはこれです：

function validate (type){
    output = [];
    var x = document.getElementById("reg");

    if (type == 'tos'){
        div = 'result_tos';
        input = x.elements[4].checked;

        if (input){
            output.push('<img src="correct.png"/>');    
        } else {
            output.push('You must agree to our terms of service in order to join !');
        }

        document.getElementById(div).innerHTML = (output.join('')); //display result
    }
}
4

3 に答える 3

0

これはおそらく、これを行うことをお勧めする方法です。これは、与えられた例よりも複雑ですが、意図したフローとOPが使用しているフローに少し苦労しています。

模擬HTML

<form name="reg" id="reg" method="post">
    <input type="checkbox" id="agree" name="agree"/> Agreement<br/>
    <input type="checkbox" id="ok" name="ok"/> Ok<br/>
    <input type="checkbox" id="tos" name="tos"/> TOS<br/>
    <button name="submit" type="submit">Submit Validation</button>
</form>
<h1>Display Output</h1>
<div id="display"></div>​

検証の反復

function validate (){
    var display = document.getElementById('display'),
        output = [],
        checks = ['agree','ok','tos'],
        check,
        msg;

    while (check = document.reg[checks.pop()]) {
        if (!check.checked) {
            switch (check.name) {
                case 'agree':
                    msg = 'You must AGREE!';
                break;
                case 'ok':
                    msg = 'You must OK!';
                break;
                case 'tos':
                    msg = 'You must TOS!';
                break;
            }

            output.push(msg);
        }
    }

    if (output.length == 0) {
        output = [
            'You have successfully validated!',
            '<img src="http://goo.gl/UohAz"/>'
        ];
    }

    display.innerHTML = output.join('<br>'); 

    return false;
}

window.onloadまた、イベントハンドラーをアタッチするときも忘れないでください。以下は必ずしも推奨される方法ではありませんが、のようなインラインハンドラーよりもクリーンですonclick="validate()"。

window.onload = function(){
    document.reg.onsubmit = validate;
};

http://jsfiddle.net/bj5rj/2

于 2012-06-15T02:59:22.550 に答える
0

次のjsfiddleは、コードのわずかに変更されたバージョンであり、正常に機能しているようです。私はあなたのエラーがここにあるとは思わない。（私はよく知らないelements;それはIE固有ですか？他のブラウザーで動作するように変更しました。）

http://jsfiddle.net/QnDAg/1/

于 2012-06-15T03:00:54.563 に答える
0

私はこれに以下のようにアプローチします。リスナーから要素への参照を渡します。

<form name="reg" id="reg" method="post">
    <input type="checkbox" onclick="return validate(this)" name="tos">
</form>

<script type="text/javascript">

function validate(el) {
  // you don't really need a reference to the form, 
  // but here's how to get it from the element
  var form = el.form; 

  if (el.name == 'tos') {

    if (el.checked) {
      // show pass graphic (green tick?)

    } else {
      // hide checkbox and show text
    }
  }
}
</script>

ティックとテキストの表示を切り替えるには、クラス値を設定する必要があります。そうすれば、マークアップで必要な値に変更でき、スクリプトは2つを切り替えるだけです。

于 2012-06-15T03:22:53.867 に答える