單擊按鈕時如何顯示消息

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;

}

我有這個 function 以前在類似的環境中工作過，但沒有經過驗證。 如果選中下面的復選框，我希望這個 function 工作。

    $("#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() 方法，它允許我們驗證是否選中了復選框或單選按鈕。 出於本示例的目的，我將輸入切換為復選框，因為它更適合 UX/UI 明智的說法，但是，可以在兩個控件中驗證此屬性。 我們將使用 jQuery 的toggleClass() 方法來切換最初隱藏 P 標簽及其內容的 class。 我當然希望這會有所幫助。

快樂編碼！

 $(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","")
    }
})