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>

在显示刻度和文本之间切换应该通过设置一个类值来完成，这样你就可以在标记中将它更改为你想要的任何内容，并且脚本只是切换两者。

于 2012-06-15T03:22:53.867 回答