sweetalert icon indicating copy to clipboard operation
sweetalert copied to clipboard

Multiple Checkboxes

Open ksjdfngkdljsnsdfgjageil opened this issue 6 years ago • 4 comments

Hey,

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

ksjdfngkdljsnsdfgjageil avatar Jun 09 '18 13:06 ksjdfngkdljsnsdfgjageil

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}`)
        })

JuniorRibas avatar Mar 08 '19 12:03 JuniorRibas

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

marcodarko avatar Oct 12 '20 18:10 marcodarko

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

cosmin-novac avatar Mar 25 '22 21:03 cosmin-novac

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}` })
}

masatokawasakii avatar Jun 02 '22 10:06 masatokawasakii