如何在变化事件中使用无线电?

小开

最佳答案

您可以使用this，它指向当前的input元素。

$('input[type=radio][name=bedStatus]').change(function() {
if (this.value == 'allot') {
// ...
}
else if (this.value == 'transfer') {
// ...
}
});

http://jsfiddle.net/4gZAT/

请注意，您在if语句和:radio选择器中都将该值与allot进行比较，:radio选择器已弃用。

如果你不使用jQuery，你可以使用document.querySelectorAll和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);
});

小开

对上述答案的改编……

$('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

http://jsfiddle.net/xwYx9

小开

$(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提琴

小开

一种更简单、更清晰的方法是使用带有@Ohgodwhy答案的类

<input ... class="rButton">
<input ... class="rButton">

脚本

$( ".rButton" ).change(function() {
switch($(this).val()) {
case 'allot' :
alert("Allot Thai Gayo Bhai");
break;
case 'transfer' :
alert("Transfer Thai Gayo");
break;
}
});

小开

<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>

小开

使用onchage函数


function my_function(val){
alert(val);
}

<input type="radio" name="bedStatus" value="allot" onchange="my_function('allot')" checked="checked">Allot
<input type="radio" name="bedStatus" value="transfer" onchange="my_function('transfer')">Transfer

小开

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

小开

简单的ES6 (仅javascript)解决方案。

document.forms.demo.bedStatus.forEach(radio => {
radio.addEventListener('change', () => {
alert(`${document.forms.demo.bedStatus.value} Thai Gayo`);
})
});

<form name="demo">
<input type="radio" name="bedStatus" value="Allot" checked>Allot
<input type="radio" name="bedStatus" value="Transfer">Transfer
</form>

小开

如果单选按钮是动态添加的，您可能希望使用它

$(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;
}
});

小开

$(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");
}
});
});

小开

添加类"pnradio"到单选按钮，然后用。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;
}
});