Ik heb twee keuzerondjes
op change event ik wil change button Hoe is het mogelijk?
Mijn 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>
Antwoord 1, autoriteit 100%
U kunt thisgebruiken, wat verwijst naar het huidige input-element.
$('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");
}
});
Houd er rekening mee dat je de waarde vergelijkt met allotin zowel if-statements als :radioselector is verouderd.
Als u geen jQuery gebruikt, kunt u de methoden document.querySelectorAllen HTMLElement.addEventListenergebruiken:
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);
});
Antwoord 2, Autoriteit 14%
Een aanpassing van het bovenstaande antwoord …
$('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">TransferAntwoord 3, Autoriteit 4%
Een eenvoudiger en een reiniger manier zou zijn om een klasse met @ OHGODWHY’s antwoord
te gebruiken
<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;
}
});
Antwoord 4, autoriteit 2%
$(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");
}
});
});
Antwoord 5
Gebruik onchage-functie
<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>
Antwoord 6
Eenvoudige ES6(alleen javascript)oplossing.
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>Antwoord 7
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);
});
});
Antwoord 8
Als de keuzerondjes dynamisch worden toegevoegd, wilt u dit misschien gebruiken
$(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;
}
});
Antwoord 9
<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>
Antwoord 10
$(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");
}
});
});
Antwoord 11
Voeg de klasse “Pnradio” toe aan de keuzerondjes,
Schakel vervolgens over met .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;
}
});