如何在HTML中，当复选框未被选中时提交0，选中时提交1？

Question

如何在HTML中，当复选框未被选中时提交0，选中时提交1？

31

如何在复选框数组中检查复选框是否选中，并在选中时提交值1，未选中时提交值0？我尝试过以下代码但未成功。当表单提交时，我想在php数组中获取该数组。请帮忙！

<input id = 'testName0' type = 'checkbox' name = 'check[0]' value = '1' checked>
<input id='testNameHidden0'  type='hidden' value='0' name='check[0]'>

<input id = 'testName1' type = 'checkbox' name='check[1]' value = '1' unchekced>
<input id='testNameHidden1'  type='hidden' value='0' name='check[1]'>

<input type = 'submit' value = 'Save Changes'>
>
<script>
if(document.getElementById('testName0').checked){
  document.getElementById('testNameHidden0').disabled = true;
}
</script>

<script>
if(document.getElementById('testName1').checked){
  document.getElementById('testNameHidden1').disabled = true;
}
</script>

- Rishabh Gusain

3个回答

1

以下是解决我问题的更好方法。

问题：隐藏的和选中的都会发送到我的服务器。

解决方案：

if len(key) == 1 {
  value = false
} else {
  value = true
}

如果key的长度为1，我知道只有隐藏字段被发送。其他情况都意味着该框已被选中。简单易懂。

- cmshnrblu

0

我有一个更简单的代码，对我来说效果很好：

<input type="checkbox" value="true" id="checkBox">

然后是 JQuery 代码：

var checkBoxValue = $('#checkBox').is(':checked')?$('#checkBox').val():false

我使用了一个三元运算符来设置选中和未选中条件下的值。

- Abhi Das

3

你在这里介绍了jQuery，但问题中并没有提到它。 - Jon P

1

@JonP 所选的答案获得了57个赞同，并将Jquery作为主要解决方案。我认为因为使用库而对答案进行贬低是不公平的。无论结果如何，它都是一个答案。 - A Friend

@AFriend，不要假设我投了反对票。我只是在一年多以前留下了评论。 - Jon P

@JonP 我只是在针对我评论的第一句话跟你说话，伙计。 - A Friend

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JungleZombie · Accepted Answer

最简单的方法，无需 JavaScript，只需在复选框之前添加一个隐藏输入框：

最簡單的方法，無需 JavaScript，只需在複選框之前添加一個隱藏輸入框：

<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />

输入需要具有相同的名称。如果复选框被选中，则将提交值1，否则来自隐藏输入的值0。

您的情况JavaScript解决方案，不需要隐藏输入：

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this + 'input[type=checkbox]:not(:checked)').each(function () {
                // set value 0 and check it
                $(this).attr('checked', true).val(0);
            });
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

PHP解决方案，无需隐藏输入：

<?php
    // if data is posted, set value to 1, else to 0
    $check_0 = isset($_POST['check'][0]) ? 1 : 0;
    $check_1 = isset($_POST['check'][1]) ? 1 : 0;
?>

<form method="post">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>

编辑：自jQuery 1.6起，JavaScript解决方案已不再有效。根据这篇文章，更适当的解决方案如下：

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this).find('input[type=checkbox]:not(:checked)').prop('checked', true).val(0);
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>