sweetalert
sweetalert copied to clipboard
Multiple Checkboxes
Hey,
Is there a way to add Multiple Checkboxes in an Alert?
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}`)
})
Please add native support for this given a list of options, it should be doable.
How could one get the inputOptions Promise to play well with the html?
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}` })
}