web-dev-qa-db-ja.com

HTML入力をスイートアラートに追加するにはどうすればよいですか？

スイートアラートを使用してダイアログボックスにラジオボタンを追加しようとしていますが、追加できません。コードは次のとおりです。

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");
                }
            });
javascripthtmlcsssweetalert
6
b22

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.value) {
    Swal.fire({
      type: 'success',
      html: 'You selected: ' + result.value
    });
  }
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
4
Limon Monte

デフォルトのsweetalertのスタイルシートはアラートのすべての入力フィールドを非表示にするため、初期値を復元する必要があります。

.sweet-alert input {
   display: initial;
   width: auto;
   height: auto;
   margin: auto;
}
4
Michał Perłakowski