How to use radio on change event?
我有两个单选按钮
在更改事件上我想要更改按钮怎么可能?
我的密码
1 2 | <input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot <input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer |
脚本
1 2 3 4 5 6 7 8 9 10 | $(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"); } }); }); |
您可以使用
1 2 3 4 5 6 7 8 | $('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"); } }); |
http://jsfiddle.net/4gZAT/
请注意,如果不赞成使用语句和
如果您不使用jQuery,则可以使用
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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); }); |
以上答案的改编...
1 2 3 4 5 6 7 8 9 10 | $('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; } }); |
1 2 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <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
一种更简单,更简洁的方法是将类与@Ohgodwhy的答案一起使用
1 2 | <input ... class="rButton"> <input ... class="rButton"> |
脚本
1 2 3 4 5 6 7 8 9 10 | ?$(".rButton" ).change(function() { switch($(this).val()) { case 'allot' : alert("Allot Thai Gayo Bhai"); break; case 'transfer' : alert("Transfer Thai Gayo"); break; } });? |
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(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小提琴
使用onchage功能
1 2 3 4 5 6 7 | <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 function my_function(val){ alert(val); } |
简单的ES6(仅适用于javascript)解决方案。
1 2 3 4 5 | document.forms.demo.bedStatus.forEach(radio => { radio.addEventListener('change', () => { alert(`${document.forms.demo.bedStatus.value} Thai Gayo`); }) }); |
1 2 3 4 | <form name="demo"> <input type="radio" name="bedStatus" value="Allot" checked>Allot <input type="radio" name="bedStatus" value="Transfer">Transfer </form> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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); }); }); |
如果单选按钮是动态添加的,则不妨使用此功能
1 2 3 4 5 6 7 8 9 10 | $(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; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 } }); |
1 2 3 4 5 6 7 8 9 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"); } }); }); |