Question

我想在使用 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"/>

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

Answer 2

试试这个

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

单击按钮时如何显示消息

2 个答案: