如果未选中复选框,如何提交 0,如果在 HTML 中选中复选框,如何提交 1 [重复]

Posted

技术标签:

【中文标题】如果未选中复选框,如何提交 0,如果在 HTML 中选中复选框,如何提交 1 [重复]【英文标题】:How to submit 0 if checkbox is unchecked and submit 1 if checkbox is checked in HTML [duplicate] 【发布时间】:2015-09-30 18:10:08 【问题描述】:

如果复选框数组中的复选框被选中,如何提交值 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>

【问题讨论】:

【参考方案1】:

最简单的一种,不需要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 解决方案不再有效。基于this,更合适的解决方案如下:

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

【讨论】:

但是这个 javascript 有什么问题? 这样简单的任务真的没有必要使用javascript。但我已经编辑了我的答案以包括 javascript 和 php 解决方案。 重要提示:如果选中该复选框,HTTP 请求将包含这两个值。 (还是我误会了什么?) 这帮助我理解了 getAttribute 方法作为一个整体是如何工作的 在我的情况下,我需要 javascript,因为我使用命名字段数组,所以感谢更新【参考方案2】:

一个更好的解决方案为我解决了这个问题。

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

解决办法:

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

这样,如果 len(key) 为 1,我知道只有隐藏字段被发送。任何其他情况都意味着该框已选中。简单易行。

【讨论】:

【参考方案3】:

好吧,我有一个更简单的代码,对我来说效果很好:

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

然后是JQuery代码:

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

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

【讨论】:

你在这里介绍了jQuery,问题中根本没有提到它。 @JonP 获得 57 票赞成的选定答案也使用 Jquery 作为主要解决方案。我认为对答案投反对票并不遥远,因为它使用了一个库。无论结果如何获得,这都是一个答案。 @AFriend,不要以为我投了反对票。一年多以前,我只是发表了评论。 @JonP 我只是将我评论的第一句话指向你,伙计。

以上是关于如果未选中复选框,如何提交 0,如果在 HTML 中选中复选框,如何提交 1 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如果选中/取消选中复选框,则启用/禁用提交按钮?

如果在页面初始加载时未选中复选框,则返回无效提交

如何提交未选中复选框的值

如果选中则如何更新数据库1的复选框值,如果未选中则更新为0?

如果 php 和 jQuery 选中或未选中,则在 php 中动态创建复选框值

表单提交后选中的复选框保持选中/未选中状态