时间戳

首页 > 解决方案 > 单击按钮时如何显示消息

javascript - 单击按钮时如何显示消息

问题描述

当使用 jQuery 单击下面的按钮时，我想显示以下消息

<p class="msg-confirm" id="msgConf">
  Great! You got this. Let's continue.
</p>

按钮：

<input type="button" value="Start" class="btn-start" id="exec">

此消息在 CSS 中设置为 none：

.msg-confirm{
display: none;

}

我有这个功能以前在类似的情况下工作过，但没有经过验证。如果选中下面的复选框，我希望此功能正常工作。

    $("#exec").click(function(){
    if($('#d3').is(':checked')){
        $("#msgConf").show('slow');
    }
});

复选框：

<input type="radio" name="image" id="d3" class="input-step1 aheadF1"/>

标签： javascriptjqueryvalidation

解决方案

让我们利用 jQuery 的一些新特性的简单性，例如.prop() 方法，它允许我们验证复选框或单选按钮是否被选中。出于本示例的目的，我将输入切换为复选框，因为它更适合 UX/UI 明智的说法，但是，可以在两个控件中验证此属性。我们将使用 jQuery 的toggleClass() 方法来切换最初隐藏 P 标签及其内容的类。我当然希望这会有所帮助。

快乐编码！

$(document).ready(function () {
    $("#exec").click(function () {
        if ($('#d3').prop('checked')) {
            $("p").toggleClass("msg-confirm");
        } else {
            alert("Please select the checkbox to display info.");
        } 
    }); 
});
.msg-confirm {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p class="msg-confirm">
  Great! You got this. Let's continue.
</p>
<input type="button" value="Start" class="btn-start" id="exec">
<input type="checkbox" name="image" id="d3" class="input-step1 aheadF1"/>

推荐阅读