如何在没有Stripes标签的情况下提交未经检查的html复选框?

时间:2012-04-16 14:17:10

标签: jquery checkbox stripes

我正在尝试在Stripes框架旁边使用javascript客户端模板。这意味着我无法使用条带格式标记库,默认情况下会注入一个隐藏的加密字段,条带用于确定哪些复选框与表单一起呈现,因此它可以确定未复制的复选框如果未通过则取消选中作为表格参数。

将这个加密的隐藏字段与我的所有表单一起包含在内而不能使用标记库是一个很大的负担,因此我正在寻找一个全局解决方案。我提出的是在提交表单之前截取表单,将任何未选中复选框的值更改为false,并检查它们以便将它们发送到服务器。这样做的副作用是让用户在表单提交完成之前再次检查所有未经检查的选项brielfy。有没有办法隐藏已检查的动画,但仍然有表格提交值?

这是我目前的解决方案:

$("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');
    });
});

1 个答案:

答案 0 :(得分:0)

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