Question

我是jQuery的初学者，我想知道如何在提交复选框之前验证表单。

我正在创建一个简单的检查表单，如果他完成了该步骤，我的用户将勾选一个复选框。我打算做的是，如果有一个“未选中”复选框并用一个颜色突出显示，脚本会阻止表单提交。

这是我的代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
      .error {
        background-color: #F00;
      }
      .valid {
        background-color: #0F0;
      }
    </style>
    <script type="application/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">    </script>
    <script type="application/javascript">
      $('#button').on('click', function() {
        var $checkboxes = $('.container [type=checkbox]');

        $checkboxes.filter(':checked').parent().removeClass('error').addClass('valid');
        $checkboxes.not(':checked').parent().removeClass('valid').addClass('error');
      });
    </script>
  </head>

  <body>
    <div class="container">
      <input class="tick" id="option1" type="checkbox">
    </div>
    <div class="container">
      <input class="tick" id="option1" type="checkbox">
    </div>
    <input id="button" type="button" value="check">
  </body>
</html>

所以我在这里尝试的是当用户点击按钮时，脚本会突出显示所有未选中的红色复选框，并突出显示所有选中的绿色。

但是，我的脚本无法正常运行。我的脚本出了什么问题？有关更有效的方法的任何建议吗？

Answer 1

尝试以下方法：

$(document).ready(function(){
    var len = $('input[type=checkbox]').length;

    $('#button').click(function(e){
        var $cb = $('input[type=checkbox]');
        $cb.filter(':checked').parent().removeClass('error');
        var not = $cb.not(':checked').parent().addClass('error').length;
        if (len == not) {
            e.preventDefault(); // prevent the default action of the event
        }
    })
})

http://jsfiddle.net/2dcPE/

请注意，您的标记无效，ID必须是唯一的。

Answer 2

您有多个具有相同id属性的元素。 id是唯一的，应该引用一个元素。如果您计划将多个元素组合在一起，请改为使用class属性。

另外，请勿使用onclick绑定事件。只需使用jQuery .on('click'处理程序。

<强> HTML ：

<div class="container">
    <input class="tick" id="option1" type="checkbox" />
</div>

<div class="container">
    <input class="tick" id="option2" type="checkbox" />
</div>

<input id="button" type="button" value="check" />

<强>的JavaScript ：

$('#button').on('click', function() {
    var $checkboxes = $('.container [type=checkbox]');

    $checkboxes.filter(':checked').parent().removeClass('error').addClass('valid');
    $checkboxes.not(':checked').parent().removeClass('valid').addClass('error');
});

演示：http://jsfiddle.net/Blender/fzZFz/3/

Answer 3

试试这个

function validateAll(){
    $('.tick').each(function(){
        if(this.checked){
            $(this).closest('#container').addClass('valid');
        }else{
            $(this).closest('#container').addClass('error');
        }
        });
    }

查看实时fiddle

Answer 4

有几件事：

1。）您有多个具有相同ID（容器）的元素。这不是有效的html和jquery只会返回它在按ID搜索时找到的第一个元素。

2。）仅在用户单击检查按钮后才将事件绑定到更改。我认为您可以绑定到.tick更改事件，并在用户检查项目时进行验证。

3。）你的逻辑是向后验证的。当一切都有效时，您正在添加错误条件。

最终的js是这样的：

    $(".tick").change(function(){
        if ($('.tick:checked').length == $('.tick').length) {
            $('.container').removeClass("error");
            $('.container').addClass('valid');
        } else {
            $('.container').removeClass("valid");
            $('.container').addClass('error');
        }
});

对html进行小调整以删除重复的ID：

<div class="container"><input class="tick" id="option1" type="checkbox"></div>
<div class="container"><input class="tick" id="option1" type="checkbox"></div>

看到这个小提琴： http://jsfiddle.net/johnkoer/225Ty/5/

Answer 5

function validateAll() {
    $(".tick").each(function(index, item) {
        if ($(this).is(":checked")) {
            $(this).parent().removeClass().addClass('valid');
        } else {
            $(this).parent().removeClass().addClass('error');
        }
    });
}

如何验证是否在jQuery中选中了所有复选框？

5 个答案: