隐藏按钮时保持背景？ (CSS/Javascript)答案

【问题标题】：Keep background when button is hidden? (CSS/Javascript)隐藏按钮时保持背景？ (CSS/Javascript)
【发布时间】：2015-03-19 09:28:24
【问题描述】：

我有一个带有复选框的表单。提交按钮首先是隐藏的。当我选中一个复选框时，至少会出现该按钮。那是有效的。但是该按钮有一些背景图像，并且仅在按钮可见时才会出现。我希望背景图像始终存在。有没有办法解决这个问题？

HTML：

  <div class="wrapper2"><input type = button class="next_button"  name="commit"  value="Submit" onClick="resultFunction();" >

CSS：

.wrapper2{
    margin-top:  230px;
    text-align: center;
    background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 58%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(89,106,114,1)), color-stop(58%,rgba(206,220,231,1)));
}

我忘了在这里添加这个：

$(".next_button").hide();

$("#question1, #question2, #question3, #question4").change(function () {
          if ($("#question1").is(':checked') ||
              $("#question2").is(':checked') || 
              $("#question3").is(':checked') || 
              $("#question4").is(':checked') 
           ) {
             $(".next_button").show();

          } 
      });

【问题讨论】：

你能分享一下你的 resultFunction() 函数吗？
它基本上只是检查是否选中了正确的复选框
您可以添加一个DIV作为容器，并将Div的背景作为图像并仅隐藏按钮。
是的，我试过了。我忘了在我的帖子中添加一些代码

标签： javascript css button background

【解决方案1】：

您需要将按钮放入容器中，并为该容器提供背景，并确保容器具有宽度和高度，然后仅隐藏和显示按钮将保持容器背景。

【讨论】：

但这不是我现在拥有的吗？
所以给容器的宽度和高度

【解决方案2】：

我为你做了一个fiddle，希望对你有帮助。

简而言之，只需根据<input type="checkbox" ... /> 状态切换<input type="submit" ... /> 的visibility 规则即可。

【讨论】：