I have two radio button on change event i want change button How it is possible? My Code
<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>
<input type="radio" name="radio" value="upi">upi
<input type="radio" name="radio" value="bankAcc">Bank
<script type="text/javascript">
$(document).ready(function() {
$('input[type=radio][name=radio]').change(function() {
if (this.value == 'upi') {
//write your logic here
}
else if (this.value == 'bankAcc') {
//write your logic here
}
});
</script>
An adaptation of the above answer...
$('input[type=radio][name=bedStatus]').on('change', function() {_x000D_
switch ($(this).val()) {_x000D_
case 'allot':_x000D_
alert("Allot Thai Gayo Bhai");_x000D_
break;_x000D_
case 'transfer':_x000D_
alert("Transfer Thai Gayo");_x000D_
break;_x000D_
}_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot_x000D_
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer
_x000D_
Use onchage function
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot" onchange="my_function('allot')">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer" onchange="my_function('transfer')">Transfer
<script>
function my_function(val){
alert(val);
}
</script>
If the radio buttons are added dynamically, you may wish to use this
$(document).on('change', 'input[type=radio][name=bedStatus]', function (event) {
switch($(this).val()) {
case 'allot' :
alert("Allot Thai Gayo Bhai");
break;
case 'transfer' :
alert("Transfer Thai Gayo");
break;
}
});
Add the class "pnradio" to the radio buttons, then switch with .attr('id')
<input type="radio" id="sampleradio1" class="pnradio" />
<input type="radio" id="sampleradio2" class="pnradio" />
$('.pnradio').click(function() {
switch ($(this).attr('id')) {
case 'sampleradio1':
alert("xxx");
break;
case 'sampleradio2':
alert("xxx");
break;
}
});
A simpler and cleaner way would be to use a class with @Ohgodwhy's answer
<input ... class="rButton">
<input ... class="rButton">
Script
?$( ".rButton" ).change(function() {
switch($(this).val()) {
case 'allot' :
alert("Allot Thai Gayo Bhai");
break;
case 'transfer' :
alert("Transfer Thai Gayo");
break;
}
});?
$(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");
}
});
});
document.addEventListener('DOMContentLoaded', () => {
const els = document.querySelectorAll('[name="bedStatus"]');
const capitalize = (str) =>
`${str.charAt(0).toUpperCase()}${str.slice(1)}`;
const handler = (e) => alert(
`${capitalize(e.target.value)} Thai Gayo${e.target.value === 'allot' ? ' Bhai' : ''}`
);
els.forEach((el) => {
el.addEventListener('change', handler);
});
});
Simple ES6 (javascript only) solution.
document.forms.demo.bedStatus.forEach(radio => {_x000D_
radio.addEventListener('change', () => {_x000D_
alert(`${document.forms.demo.bedStatus.value} Thai Gayo`);_x000D_
})_x000D_
});
_x000D_
<form name="demo">_x000D_
<input type="radio" name="bedStatus" value="Allot" checked>Allot_x000D_
<input type="radio" name="bedStatus" value="Transfer">Transfer_x000D_
</form>
_x000D_
$(document).ready(function () {
$('input:radio[name=bedStatus]:checked').change(function () {
if ($("input:radio[name='bedStatus']:checked").val() == 'allot') {
alert("Allot Thai Gayo Bhai");
}
if ($("input:radio[name='bedStatus']:checked").val() == 'transfer') {
alert("Transfer Thai Gayo");
}
});
});
Source: Stackoverflow.com