Tengo dos botones de radio en el evento de cambio quiero cambiar el botón ¿Cómo es posible? Mi código
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer
Script
<script>
$(document).ready(function () {
$('input:radio[name=bedStatus]:checked').change(function () {
if ($("input[name='bedStatus']:checked").val() == 'allot') {
alert("Allot Thai Gayo Bhai");
}
if ($("input[name='bedStatus']:checked").val() == 'transfer') {
alert("Transfer Thai Gayo");
}
});
});
</script>
Puedes usar this
que se refiere al elemento actual input
.
$('input[type=radio][name=bedStatus]').change(function() {
if (this.value == 'allot') {
alert("Allot Thai Gayo Bhai");
}
else if (this.value == 'transfer') {
alert("Transfer Thai Gayo");
}
});
Ten en cuenta que estás comparando el valor contra allot
en ambas sentencias if y que el selector :radio
está obsoleto.
En caso de que no estés usando jQuery, puedes usar los métodos document.querySelectorAll
y HTMLElement.addEventListener
:
var radios = document.querySelectorAll('input[type=radio][name="bedStatus"]');
function changeHandler(event) {
if ( this.value === 'allot' ) {
console.log('value', 'allot');
} else if ( this.value === 'transfer' ) {
console.log('value', 'transfer');
}
}
Array.prototype.forEach.call(radios, function(radio) {
radio.addEventListener('change', changeHandler);
});
Una adaptación de la respuesta anterior...
begin snippet: js hide: false console: true babel: false -->
$('input[type=radio][name=bedStatus]').on('change', function() {
switch ($(this).val()) {
case 'allot':
alert("Allot Thai Gayo Bhai");
break;
case 'transfer':
alert("Transfer Thai Gayo");
break;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer
Fin del fragmento;
/embedded/result,js,html,css/">$(document).ready(function () {
$('#allot').click(function () {
if ($(this).is(':checked')) {
alert("Allot Thai Gayo Bhai");
}
});
$('#transfer').click(function () {
if ($(this).is(':checked')) {
alert("Transfer Thai Gayo");
}
});
});
[JS Fiddle][1]