如何提交没有条纹标签的未选中的 html 复选框？答案

【问题标题】：How can I submit unchecked html checkboxes without Stripes tags?如何提交没有条纹标签的未选中的 html 复选框？
【发布时间】：2012-04-16 14:17:10
【问题描述】：

我正在尝试在 Stripes 框架旁边使用 javascript 客户端模板。这意味着我无法使用 stripes 表单标签库，它默认注入一个隐藏的加密字段，stripes 使用该字段来确定哪些复选框与表单一起呈现，因此它可以确定哪些复选框未被选中，如果它们没有通过作为表单参数。

在我的所有表单旁边包含这个加密的隐藏字段而无法使用标签库是一个很大的负担，所以我正在寻找一个全局解决方案。我想出的是在提交表单之前拦截表单，将任何未选中复选框的值更改为 false，然后检查它们以便将它们发送到服务器。这样做的副作用是让用户在表单提交完成之前再次查看所有未选中的选项。有什么方法可以隐藏选中的动画但仍然让表单提交值？

这是我目前的解决方案：

$("body").delegate("form", "submit", function() {
    var $this = $(this);

    $('input:checkbox:not(:checked)', $this).each(function() { 
        var $this = $(this);
        $this.attr('value', 'false');
        $this.attr('checked', 'checked');
    });
});

【问题讨论】：

好吧，我的解决方案是简单地附加一个隐藏字段： $('input:checkbox:not(:checked)', $this).each(function() { $('').attr('type','hidden').attr('name', $(this).attr('name')).attr('value','false').appendTo($this ); });

标签： jquery checkbox stripes

【解决方案1】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        // This :unchecked custom selecor was created by me.
        //http://nanoquantumtech.blogspot.in/2012/03/unchecked-selector-matches-all-elements.html
        $.extend($.expr[':'], {
            unchecked: function (obj) {
                return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
            }
        });

        $(document).ready(function () {
            $('#checkBoxList').find(':checked').addClass('vechicalChecked');

            $('#btnCheckedToUncheckedValues').click(function () {
                var checkedToUncheckedValues = [];

                $('#checkBoxList').find('.vechicalChecked:unchecked').each(function () {
                    checkedToUncheckedValues.push($(this).val());
                });

                alert('Checked To Unchecked Values Are : ' + (checkedToUncheckedValues.length == 0 ? 'none' : checkedToUncheckedValues.join(',')));
            });
        });
    </script>
</head>
<body>
    <div id="checkBoxList">
        <input type="checkbox" value="0" name="Vechical" checked="checked" />0<br />
        <input type="checkbox" value="1" name="Vechical" />1<br />
        <input type="checkbox" value="2" name="Vechical" checked="checked" />2<br />
        <input type="checkbox" value="3" name="Vechical" checked="checked" />3<br />
        <input type="checkbox" value="4" name="Vechical" />4<br />
        <input type="checkbox" value="5" name="Vechical" checked="checked" />5<br />
        <input type="checkbox" value="6" name="Vechical" />6<br />
        <input type="checkbox" value="7" name="Vechical" />7<br />
        <input type="checkbox" value="8" name="Vechical" checked="checked" />8<br />
        <input type="button" id="btnCheckedToUncheckedValues" value="checked To Unchecked Values" />
    </div>
</body>
</html>

【讨论】：

// 这个 :unchecked custom selecor 是我创建的。 //nanoquantumtech.blogspot.in/2012/03/…