Saya memiliki dua tombol radio dalam bentuk HTML. Sebuah kotak dialog akan muncul ketika salah satu kolom adalah null. Bagaimana saya bisa memeriksa apakah tombol radio dipilih?
Let's berpura-pura anda memiliki HTML seperti ini
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
Untuk validasi sisi klien, di sini's beberapa Javascript untuk memeriksa mana yang dipilih:
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
Di atas dapat dibuat lebih efisien tergantung pada sifat yang tepat dari markup anda tapi itu harus cukup untuk anda mulai.
Jika anda're hanya mencari untuk melihat apakah setiap tombol radio dipilih saja pada halaman, PrototypeJS membuatnya sangat mudah.
Berikut ini's fungsi yang akan mengembalikan true jika setidaknya satu tombol radio dipilih di suatu tempat pada halaman. Sekali lagi, ini mungkin perlu untuk men-tweak tergantung pada HTML tertentu.
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
Untuk validasi dari sisi server (ingat, anda dapat't tergantung sepenuhnya pada Javascript untuk validasi!), itu akan tergantung pada bahasa pilihan anda, tetapi anda'd tapi memeriksa jenis kelamin
nilai permintaan string.
Dengan jQuery, it'd menjadi sesuatu seperti
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
Biarkan aku istirahat yang turun menjadi potongan-potongan untuk menutupi hal itu dengan lebih jelas. jQuery proses hal-hal dari kiri ke kanan.
input[name=gender]:checked
input
batas itu untuk input kategori.[name=gender]
batas untuk kategori dengan nama jenis kelamin dalam kelompok sebelumnya.:diperiksa
batas itu untuk centang/tombol radio yang dipilih dalam kelompok sebelumnya.Jika anda ingin menghindari hal ini sama sekali, menandai salah satu tombol radio sebagai bagasi (checked="telah memeriksa"
) dalam HTML, yang akan menjamin bahwa salah satu tombol radio selalu dipilih.
Vanili JavaScript cara
var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
value = radios[i].value;
}
}
Hanya mencoba untuk memperbaiki Russ Cam's solusi dengan beberapa CSS selector gula dilemparkan dengan vanili JavaScript.
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
Tidak ada kebutuhan nyata untuk jQuery di sini, querySelectorAll ini banyak didukung cukup sekarang.
Edit: fixed bug dengan css selector, I've termasuk kutipan, meskipun anda dapat menghilangkan mereka, dalam beberapa kasus, anda dapat't jadi's baik untuk meninggalkan mereka.
HTML
<input type="radio" name="offline_payment_method" nilai="Cek" > <input type="radio" name="offline_payment_method" nilai="Wire Transfer" >Kode Javascript:
var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
if(off_payment_method[i].checked) {
ischecked_method = true;
break;
}
}
if(!ischecked_method) { //payment method button is not checked
alert("Please choose Offline Payment Method");
}
Anda dapat menggunakan script sederhana ini. Anda mungkin memiliki beberapa tombol radio dengan nama yang sama dan nilai-nilai yang berbeda.
var checked_gender = document.querySelector('input[name = "gender"]:checked');
if(checked_gender != null){ //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}
Script di halaman ini membantu saya datang dengan script di bawah ini, yang saya pikir adalah yang lebih lengkap dan universal. Pada dasarnya itu akan memvalidasi sejumlah tombol radio di bentuk, yang berarti bahwa itu akan memastikan bahwa radio pilihan telah dipilih untuk masing-masing radio yang berbeda kelompok dalam bentuk. e.g dalam bentuk tes di bawah ini:
<form id="FormID">
Yes <input type="radio" name="test1" value="Yes">
No <input type="radio" name="test1" value="No">
<br><br>
Yes <input type="radio" name="test2" value="Yes">
No <input type="radio" name="test2" value="No">
<input type="submit" onclick="return RadioValidator();">
Yang RadioValidator script akan memastikan bahwa jawaban telah diberikan untuk investasi 'test1' dan 'test2' sebelum mengajukan. Anda dapat memiliki banyak kelompok radio dalam bentuk, dan itu akan mengabaikan setiap elemen bentuk lain. Semua hilang radio jawaban akan menunjukkan dalam satu peringatan popup. Di sini ia pergi, saya berharap hal ini membantu orang-orang. Bug bahan-bahan perhiasan atau bermanfaat modifikasi welcome :)
<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
var ShowAlert = '';
var AllFormElements = window.document.getElementById("FormID").elements;
for (i = 0; i < AllFormElements.length; i++)
{
if (AllFormElements[i].type == 'radio')
{
var ThisRadio = AllFormElements[i].name;
var ThisChecked = 'No';
var AllRadioOptions = document.getElementsByName(ThisRadio);
for (x = 0; x < AllRadioOptions.length; x++)
{
if (AllRadioOptions[x].checked && ThisChecked == 'No')
{
ThisChecked = 'Yes';
break;
}
}
var AlreadySearched = ShowAlert.indexOf(ThisRadio);
if (ThisChecked == 'No' && AlreadySearched == -1)
{
ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
}
}
}
if (ShowAlert != '')
{
alert(ShowAlert);
return false;
}
else
{
return true;
}
}
</SCRIPT>
Catatan ini perilaku kecerdasan jQuery ketika mendapatkan radio masukan nilai:
$('input[name="myRadio"]').change(function(e) { // Select the radio input group
// This returns the value of the checked radio button
// which triggered the event.
console.log( $(this).val() );
// but this will return the first radio button's value,
// regardless of checked state of the radio group.
console.log( $('input[name="myRadio"]').val() );
});
Jadi $('input[name="myRadio"]').val()
tidak kembali diperiksa nilai masukan radio, seperti yang anda harapkan-itu kembali tombol radio pertama's nilai.
Ini akan berlaku untuk tombol radio berbagi nama yang sama, tidak ada JQuery yang dibutuhkan.
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];
Jika kita berbicara tentang kotak centang dan kami ingin daftar dengan kotak centang dicentang berbagi sebuah nama:
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });
ini adalah fungsi utilitas I've dibuat untuk memecahkan masalah ini
//define radio buttons, each with a common 'name' and distinct 'id'.
// eg- <input type="radio" name="storageGroup" id="localStorage">
// <input type="radio" name="storageGroup" id="sessionStorage">
//param-sGroupName: 'name' of the group. eg- "storageGroup"
//return: 'id' of the checked radioButton. eg- "localStorage"
//return: can be 'undefined'- be sure to check for that
function checkedRadioBtn(sGroupName)
{
var group = document.getElementsByName(sGroupName);
for ( var i = 0; i < group.length; i++) {
if (group.item(i).checked) {
return group.item(i).id;
} else if (group[0].type !== 'radio') {
//if you find any in the group not a radio button return null
return null;
}
}
}
Dengan mootools (http://mootools.net/docs/core/Element/Element)
html:
<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />
js:
// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))
// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)
// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)
// Set second button selected (by id)
$("radiowithval2").set("checked", true)
Ada sangat canggih cara anda dapat memvalidasi apakah salah satu tombol radio diperiksa dengan ECMA6 dan metode .beberapa()
.
Html:
<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />
Dan javascript:
let htmlNodes = document.getElementsByName('status');
let radioButtonsArray = Array.from(htmlNodes);
let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);
isAnyRadioButtonChecked
akan menjadi true
jika beberapa tombol radio yang diperiksa dan palsu
jika tak satu pun dari mereka yang diperiksa.
Kode ini akan mengingatkan dipilih tombol radio ketika formulir dikirimkan. Ini menggunakan jQuery untuk mendapatkan nilai yang dipilih.
$("form").submit(function(e) {
e.preventDefault();
$this = $(this);
var value = $this.find('input:radio[name=COLOR]:checked').val();
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="COLOR" id="Rojo" type="radio" value="red">
<input name="COLOR" id="Azul" type="radio" value="blue">
<input name="COLOR" id="Amarillo" type="radio" value="yellow">
<br>
<input type="submit" value="Submit">
</form>
Dengan JQuery, cara lain untuk memeriksa status tombol radio adalah untuk mendapatkan atribut 'telah memeriksa'.
Misalnya:
<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />
Dalam hal ini anda dapat memeriksa dengan menggunakan tombol:
if ($("#gender_male").attr("checked") == true) {
...
}
just a lil bit modifikasi untuk Menandai Biek ;
HTML
<form name="frm1" action="" method="post">
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" / >
<input type="button" value="test" onclick="check1();"/>
</form>
dan kode Javascript untuk memeriksa apakah tombol radio dipilih
<script type="text/javascript">
function check1() {
var radio_check_val = "";
for (i = 0; i < document.getElementsByName('gender').length; i++) {
if (document.getElementsByName('gender')[i].checked) {
alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
radio_check_val = document.getElementsByName('gender')[i].value;
}
}
if (radio_check_val === "")
{
alert("please select radio button");
}
}
</script>
http://www.somacon.com/p143.php/
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
Ini juga bekerja, menghindari panggilan untuk sebuah elemen id tapi panggilan itu menggunakan elemen array.
Kode berikut ini didasarkan pada fakta bahwa sebuah array, disebut sebagai tombol radio group, terdiri oleh tombol radio unsur-unsur dalam urutan yang sama seperti mereka di mana dinyatakan dalam dokumen html:
if(!document.yourformname.yourradioname[0].checked
&& !document.yourformname.yourradioname[1].checked){
alert('is this working for all?');
return false;
}
HTML:
<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>
<p id="result"></p>
JAVAScript:
var options = document.getElementsByName("calculation");
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
// do whatever you want with the checked radio
var calc = options[i].value;
}
}
if(typeof calc == "undefined"){
document.getElementById("result").innerHTML = " select the operation you want to perform";
return false;
}