如何將 HTML 輸入添加到甜蜜警報中？

Question

我正在嘗試使用甜蜜警報將單選按鈕添加到對話框中，但我無法做到。 以下是代碼：

swal({
        title: "<small>Please select an reason to cancel this job !</small>",
        type: "warning",
        text:"<input type=\"radio\" name=\"reason\" value=\"male\">Reason 1<br><input type=\"radio\" name=\"reason\" value=\"female\">Reason 2<br><input type=\"radio\" name=\"reason\" value=\"female\">Other Reason",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        closeOnConfirm: false,
        closeOnCancel: false,
        html: true
    },
            function(isConfirm){
                if (isConfirm) {
                    swal("Result !","Job cancelled successfully.");
                } else {
                    swal("Cancelled  !", "Process aborted");
                }
            });

Answer 1

SweetAlert2支持開箱即用的無線電輸入： https : //sweetalert2.github.io/#input-radio

 Swal.fire({ title: 'Select color', input: 'radio', inputOptions: { '#ff0000': 'Red', '#00ff00': 'Green', '#0000ff': 'Blue' }, // validator is optional inputValidator: function(result) { if (!result) { return 'You need to select something!'; } } }).then(function(result) { if (result.isConfirmed) { Swal.fire({ icon: 'success', html: 'You selected: ' + result.value }); } })

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Answer 2

默認的 sweetalert 樣式表隱藏了警報中的所有輸入字段，因此您必須恢復初始值：

.sweet-alert input {
   display: initial;
   width: auto;
   height: auto;
   margin: auto;
}