Question

我的注册表单中有一个复选框，如下所示：

<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
    }
}

Answer 1

这可能就是我建议你这样做的方式，这比给出的例子更复杂，但我正在努力与预期的流量和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

Answer 2

以下jsfiddle是您的代码的略微修改版本，似乎工作正常。我不认为你的错误在这里。（我不熟悉elements; IE是否具体？我将其改为在其他浏览器上工作。）

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

Answer 3

我会按如下方式处理。从侦听器传递对元素的引用。

<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>

在显示刻度和文本之间进行交换应该通过设置类值来完成，这样你就可以将它改为你想要的标记，而脚本只需切换两者。

复选框js切换错误

3 个答案: