单击按钮时如何显示消息答案

【问题标题】：How to show a message when a button is clicked单击按钮时如何显示消息
【发布时间】：2021-07-30 18:39:43
【问题描述】：

我想在使用 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 中设置为无：

.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"/>

【问题讨论】：

这段代码已经在工作了...
@mindmaster 不是。我将验证放在代码的末尾，因此由于某种原因它不理解。在这之前我有很多验证。

标签： javascript jquery validation

【解决方案1】：

让我们利用 jQuery 的一些新功能的简单性，例如 .prop() method，这将允许我们验证是否选中了复选框或单选按钮。出于本示例的目的，我将输入切换为复选框，因为它更适合 UX/UI 明智的说法，但是，可以在两个控件中验证此属性。我们将使用 jQuery 的toggleClass() method 来切换最初隐藏 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"/>

【讨论】：

【解决方案2】：

试试这个

$("#exec").on("click",function (){
    if($('#d3').is(':checked')){
       $("#msgConf").css("display","")
    }
})

【讨论】：

我不知道为什么这被接受了。它在功能上等同于 OP 所拥有的