0

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

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

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

4

5 回答 5

2

尝试以下操作：

$(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 必须是唯一的。

于 2012-09-27T03:32:18.953 回答
1

您有多个具有相同id属性的元素。ids 是唯一的，应该引用一个元素。如果您计划将多个元素组合在一起，请改用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/

于 2012-09-27T03:37:52.110 回答
0

试试这个

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

见现场小提琴

于 2012-09-27T03:35:46.063 回答
0

有几件事：

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/

于 2012-09-27T03:36:15.463 回答
0 
function validateAll() {
    $(".tick").each(function(index, item) {
        if ($(this).is(":checked")) {
            $(this).parent().removeClass().addClass('valid');
        } else {
            $(this).parent().removeClass().addClass('error');
        }
    });
}
于 2012-09-27T03:44:15.447 回答