PHP或JS GET表单：如果选中复选框，如何添加字段答案

【问题标题】：PHP or JS GET form: How to add a field if checkbox is checkedPHP或JS GET表单：如果选中复选框，如何添加字段
【发布时间】：2017-03-14 23:09:19
【问题描述】：

我有带有几个复选框字段的基本 html 表单。如果选中复选框，我想添加另一个字段，以便通过 url 传递添加的字段。我的代码到目前为止，但它不起作用：

<form action="/s/mypage/" method="GET">
<input name="id1" type="checkbox" value="ime" checked/>Input 1
<input name="id11" type="checkbox" value="deinost" />Input 11
<input name="id2" type="checkbox" value="adres" />Input 2
<input name="id3" type="checkbox" value="kapital" />Input 3
<input name="id4" type="checkbox" value="upravitel" />Input 4
<input name="id5" type="checkbox" value="sobstvenik" />Input 5
<input name="id6" type="checkbox" value="drugo" />Input 6
<input name="" type="submit" value="go ahead" />

<?php
if (isset($_GET["id[1]"])) {
echo '<input type="hidden" name="do" value="12345" />';
}
?>
</form>

我该怎么做？不用php，javascript就可以了。

【问题讨论】：

标签： javascript php html forms checkbox

【解决方案1】：

由于条件取决于复选框状态，您可能希望在客户端的 javascript 中执行此操作。一种方法是在提交表单时进行检查。如果你使用 jQuery，它可能看起来像这样：

$('form').submit(function() {
  if($('#id1').is(':checked')) {
    $(this).append('<input type="hidden" name="do" value="12345" />');
  }
});

【讨论】：

谢谢！为什么这个 && 运算符不起作用？ if($('#id1').is(':checked') && $('#id2').is(':checked')) { $(this).append(''); }
语法看起来正确。我建议您尝试 console.log($('#id1').is(':checked') && $('#id2').is(':checked')) 看看是否返回 true。如果确实如此，那么您就知道条件得到满足。否则，请单独检查每个元素以尝试缩小问题范围。

【解决方案2】：

您可以尝试以下方法：

<script>
   $(function(){
       $('input[type=checkbox]').on('click', function(){
         if( $(this).is(':checked') ){
            /// your code goes here if a checkbox checked
          }
       })
   }) 
</script>

【讨论】：

【解决方案3】：

<table>
<td>
<input type ="checkbox" id ="morning"> Morning</td><td class="hiden css"> After which period want break  </td>
                                    <td> <input type="text" class="hiden css" id="morning_break" pattern ="[0-9]+" name="morning_break"></td>
                  </table>
$(document).ready(function(){
        $(".hiden,.hide1").hide();
        });
   $("#morning").click(function(){
        $(".hiden").toggle();
    });

这里的代码可以很好地满足您的要求

【讨论】：