Question

我正在尝试在网络表单中制作一系列复选框，将“true”或“false”发布到下一个php页面，具体取决于是否已选中。我决定对于每个复选框（value =“true”），我会有一个隐藏的复选框（值=“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>

Answer 1

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

<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来切换隐藏的复选框。

Answer 2

这条线可能导致事情破裂：

$(".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's .next() function.这会让你免于所有这些nextIndex mumbo jumbo。

Answer 3

如果您正在命名这样的复选框，则不一定有索引可以使用：

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

发布已选中和未选中的复选框

3 个答案: