У меня есть две кнопки-переключателя при изменении события. Я хочу изменить кнопку. Как это возможно? Мой код
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer
скрипт
<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>
Вы можете использовать this
которое относится к текущему элементу 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");
}
});
Обратите внимание, что вы сравниваете значение с allot
в выражениях if и :radio
selector устарела.
Если вы не используете 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;
}
});
.on()
действительно имеет преимущества по сравнению с вышесказанным, однако, учитывая динамические селекторы, это, безусловно, единственный путь в jQuery 1.7+
Более простой и понятный способ - использовать класс с @Ohgodwhy 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");
}
});
});
$(this).is(":checked")
используйте this.checked
. Это чистый JS, и поэтому он намного быстрее.
Используйте функцию onchage
<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>
Простое решение ES6 (только javascript).
Array.prototype.forEach.call(document.forms.demo.bedStatus, 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>
<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>
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);
});
});
Если переключатели добавляются динамически, вы можете использовать это
$(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;
}
});
if($("input[name='bedStatus']:checked").val() == 'allot')
if($("input[name='bedStatus']").val() == 'allot')