复选框 js 切换不正确

Checkbox js toggling incorrectly

本文关键字：不正确 js 复选框      更新时间：2023-09-26

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

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

下面的jsfiddle是代码的稍微修改版本，似乎工作正常。我不认为你的错误在这里。（我不熟悉elements;这是IE特有的吗？我将其更改为在其他浏览器上运行。

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

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

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

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

这可能是我建议您这样做的方式，它比给出的示例更复杂，但我在预期的流程和 OP 使用的流程方面有点挣扎：

模拟网页 

<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

相关文章：