3

我正在尝试在 Web 表单中制作一系列复选框，这些复选框将根据是否选中它们将“true”或“false”发布到下一个 php 页面。我决定，对于每个复选框（值=“ true”），我将拥有一个隐藏的复选框（value =“ false”），这总是相反的（在选中复选框时，没有选中隐藏的复选框等。）我正在使用jQuery去做这个。

'td' 元素的数量是未知的（'td' 可以使用按钮无限次克隆，以提交多个值）。我将警报添加到 jQuery 以进行测试。

当我将 jQuery 代码和隐藏的复选框添加到我的源代码中时（我将其设置为可见以用于测试目的），代码将无法正常工作，并且我网页上的所有其他 jQuery 都停止工作了！

jQuery代码：

$(document).ready(function(){
    /***post all 'required' checkboxes instead of just checked ones***/
    $(".required").click(function(event){
        event.preventDefault();
        alert("test");
        nextIndex = this.index() + 1;
        alert(nextIndex);
        $(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));
    });
});

HTML：

<td>
    <input type="checkbox" class="required" name="required[]" value="true">
    <input type="checkbox" class="required" name="required[]" value="false" style="display: none;" checked>
</td>
4

3 回答 3

8

您不必隐藏其中一个复选框。这是一个应该完成您想要的解决方案：

<input type="hidden" name="required" value="false" />
<input type="checkbox" name="required" value="true" />

如果未选中该复选框，则隐藏字段将与该false值一起提交。如果复选框被选中，则true复选框中的值将覆盖false隐藏输入中的值。

只要您可以将每个复选框命名为稍有不同，它就可以工作。

以下内容也适用于值数组：

<input type="hidden" name="required[0]" value="false" />
<input type="checkbox" name="required[0]" value="true" />

<input type="hidden" name="required[n]" value="false" />
<input type="checkbox" name="required[n]" value="true" />

这样，您不需要任何客户端 javascript 来切换隐藏的复选框。

于 2012-07-25T19:33:00.043 回答
1

这条线可能导致事情中断：

$(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));

你可能的意思是：

$(".required:eq(" + nextIndex + ")").attr("checked", !$('.required:eq(' + nextIndex + ')').attr("checked"));

另请注意，您需要nextIndex去掉引号。

我的猜测是你的 javascript 控制台会抛出一些与此相关的错误。

编辑：

我注意到的另一个错误是：

nextIndex = this.index() + 1;

.index()是一个 jQuery 函数，必须在 jQuery 对象上调用。this是被点击的元素，所以你需要说：

nextIndex = $(this).index() + 1;

顺便说一句，您可能想查看jQuery 的.next()功能。它将使您摆脱所有这些nextIndex胡言乱语。

于 2012-07-25T19:31:29.707 回答
0

如果您像这样命名您的复选框，则不一定要使用索引：

<input type="checkbox" name="checkbox_name[]" />

那么这个 jQuery 片段应该适合你，假设你可以依赖 javascript。

$('form').submit(function(){

    $(":checkbox:not(:checked)").each(function(element, index){
        $(this).attr({value: 'false', checked:'checked'});
    });

    return true;
});

这将遍历所有未选中的复选框，选中它们，并将它们的值设置为false。这是你在 PHP 中得到的：

[checkbox_name] => Array
    (
        [0] => off
        [1] => on
        [2] => off
    )

代替：

[checkbox_name] => Array
    (
        [0] => on
    )
于 2012-08-17T23:21:11.887 回答