【问题标题】:choosing checkbox echoing submit button immediately立即选择复选框回显提交按钮
【发布时间】:2011-06-03 18:45:17
【问题描述】:

如果我有复选框并通过选择它(没有任何提交按钮)向我显示提交按钮,代码是什么

<html>
<head>
<title>test</title>
<form method="post">
<?php
//what will be the code here?
?>
<input type='checkbox' name='cb'>
</form>
</html>

【问题讨论】:

  • 这是一个 javascript 问题而不是 PHP 问题
  • 所以你想提交按钮只有在复选框被选中时才会出现?
  • 勾选复选框后显示提交按钮
  • 那没有js就不能写代码了?
  • 查看标签.. 你也可以使用 Javascript 和 jQuery 来完成

标签: php javascript post checkbox submit


【解决方案1】:

没有 Javascript 就无法做到。使用 Javascript 吗?

简单、快捷、温馨、平易近人

<script>
function openinput() {
    document.getElementById('submit').style.visibility = "visible";
}
</script>
<form>
<input type="checkbox" onclick="openinput()" />
<input type="submit" id="submit" value="go" style="visibility: hidden" />
</form>

【讨论】:

  • 人们投票只是为了关注他人;他们也对我投了反对票:(
【解决方案2】:

不是 JS 人,但像这样简单的东西应该可以工作(未经测试的代码):

<script>
function showHide(obj){
    if(obj.checked==true){
        document.getElementById('submit_btn').style.display = 'inline'; 
    }else{ 
        document.getElementById('submit_btn').style.display = 'none'; 
    }
}
</script>

<form method="post">
<input type='checkbox' name='cb' onclick="showHide(this)">
<input type="submit" id="submit_btn" value="submit" style="display:none" />
</form>

当然还有使用 JQuery 等框架的更优雅的解决方案

【讨论】:

    【解决方案3】:

    类似这样的事情,但这只有在您确实提交了表单但除了此检查之外不对帖子值做任何事情时才有效。 JavaScript 会是更好的选择。

    <?php
    if(isset($_POST['cb'])) {
    ?>
    <input type="submit" value="go power rangers" />
    <?php
    };
    ?>
    

    【讨论】:

      【解决方案4】:

      原始代码:(在 jQuery v1.6 中)

       $('input[type="checkbox"]').change(function() {
          var $input = $(this);
          if($input.prop('checked')){
             alert('checked');
             $('input[type="submit"]').show();
         }
          else
              $('input[type="submit"]').hide();
      });
      

      DEMO

      【讨论】:

      • HELLO to downvoters,请让我知道你为什么不赞成这个答案?我首先提到原始代码,然后是完整的工作代码;请查阅。谢谢
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-05-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-13
      • 1970-01-01
      相关资源
      最近更新 更多