t4t5 / sweetalert

A beautiful replacement for JavaScript's "alert"
https://sweetalert.js.org
MIT License
22.4k stars 2.84k forks source link

Multiple Checkboxes #840

Open ksjdfngkdljsnsdfgjageil opened 6 years ago

ksjdfngkdljsnsdfgjageil commented 6 years ago

Hey,

Is there a way to add Multiple Checkboxes in an Alert?

JuniorRibas commented 5 years ago

Hi brother, I made that example here. See if it helps.


Swal.fire({
          title: 'Particularidade',
          html: '<h3>Alcool <input type="checkbox" id="alcool"  /></h3><p/>' +
                '<h3>Cigarro <input type="checkbox" id="cigarro"  /></h3>',
          confirmButtonText: 'confirmar',
          preConfirm: () => {
            var alcool = Swal.getPopup().querySelector('#alcool').checked
            var cigarro = Swal.getPopup().querySelector('#cigarro').checked
            console.log("Alcool = " + alcool + " Cigarro = "+ cigarro)

            return {alcool: alcool, cigarro: cigarro}
          }
        }).then((result) => {
          Prescricao.usoAlcoolica = result.value.alcool
          Prescricao.usoCigarro = result.value.cigarro
          Swal.fire(`Babe?: ${result.value.alcool}\nFuma?: ${result.value.cigarro}`)
        })
marcodarko commented 3 years ago

Please add native support for this given a list of options, it should be doable.

cosmin-novac commented 2 years ago

How could one get the inputOptions Promise to play well with the html?

masatokawasakii commented 2 years ago

leave other sample code here

/* inputOptions can be an object or Promise */
const inputOptions = new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      '#ff0000': 'Red',
      '#00ff00': 'Green',
      '#0000ff': 'Blue'
    })
  }, 1000)
})

const { value: color } = await Swal.fire({
  title: 'Select color',
  input: 'checkbox',
  inputOptions: inputOptions,
  inputValidator: (value) => {
    if (!value) {
      return 'You need to choose something!'
    }
  }
})

if (color) {
  Swal.fire({ html: `You selected: ${color}` })
}