单击按钮时如何显示消息

Question

I want to show the following message when the button below is clicked using jQuery

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

Button:

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

This message is set as none in CSS:

.msg-confirm{
display: none;

}

I have this function that worked before on a similar context, but without the validation. If the checkbox below is checked, I want this function working.

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

Checkbox:

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

Answer 1

Let's make use of the simplicity of some of the new features of jQuery such as the .prop() method that will allow us to verify if a checkbox or radio button is checked. For the purpose of this example, I switched the input to a checkbox since it is more appropriate UX/UI wise speaking, however, this property can be verified in both controls. We will use the toggleClass() method of jQuery to toggle the class that hides the P tag and its content initially. I certainly hope this helps.

Happy coding!

 $(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

Try this

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