javascript - SweetAlert2 detect radio button select - Stack Overflow

admin管理员组

文章数量:1401484

I am using SweetAlert2 javascript library to show popups. SweetAlert2 is a fork of SweetAlert which was not maintained anymore. SweetAlert2 allows me to add radio buttons like this

// inputOptions can be an object or Promise
var inputOptions = new Promise(function(resolve) {
    resolve({
      '#ff0000': 'Red',
      '#00ff00': 'Green',
      '#0000ff': 'Blue'
    });
});

swal({
  title: 'Select color',
  input: 'radio',
  inputOptions: inputOptions,
  inputValidator: function(result) {
    return new Promise(function(resolve, reject) {
      if (result) {
        resolve();
      } else {
        reject('You need to select something!');
      }
    });
  }
}).then(function(result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  });
})

SweetAlert2 give 'swal2-radio' name to the radio inputs, like this

<input id="swal2-radio-1" type="radio" name="swal2-radio" value="3">

So I try to listen for swal2-radio for any clicks like this:

$("input[name='swal2-radio']").on("click", function() {
var id = $('input[name=swal2-radio]:checked').val();
console.log('id: ' + id);
});

It should print to console so that I know it worked.

Here is the code that I have so far: /

Am I doing something wrong or is this not working because of how SweetAlert2 works?

I am using SweetAlert2 javascript library to show popups. SweetAlert2 is a fork of SweetAlert which was not maintained anymore. SweetAlert2 allows me to add radio buttons like this

// inputOptions can be an object or Promise
var inputOptions = new Promise(function(resolve) {
    resolve({
      '#ff0000': 'Red',
      '#00ff00': 'Green',
      '#0000ff': 'Blue'
    });
});

swal({
  title: 'Select color',
  input: 'radio',
  inputOptions: inputOptions,
  inputValidator: function(result) {
    return new Promise(function(resolve, reject) {
      if (result) {
        resolve();
      } else {
        reject('You need to select something!');
      }
    });
  }
}).then(function(result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  });
})

SweetAlert2 give 'swal2-radio' name to the radio inputs, like this

<input id="swal2-radio-1" type="radio" name="swal2-radio" value="3">

So I try to listen for swal2-radio for any clicks like this:

$("input[name='swal2-radio']").on("click", function() {
var id = $('input[name=swal2-radio]:checked').val();
console.log('id: ' + id);
});

It should print to console so that I know it worked.

Here is the code that I have so far: https://jsfiddle/ayx0fkz3/

Am I doing something wrong or is this not working because of how SweetAlert2 works?

• javascript
• jquery
• sweetalert
• sweetalert2

Share Improve this question Follow edited Apr 21, 2017 at 9:47 Limon Monte 54.5k4949 gold badges189189 silver badges220220 bronze badges asked Sep 22, 2016 at 14:01 niko craftniko craft 2,99755 gold badges4747 silver badges7575 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

you have to bind event by delegation event binding with whole document.

$(document).on("click",".swal2-container input[name='swal2-radio']", function() {
    var id = $('input[name=swal2-radio]:checked').val();
    console.log('id: ' + id);
});

Check Fiddle Link

本文标签： javascriptSweetAlert2 detect radio button selectStack Overflow