Am două butoane radio într-un formular HTML. O casetă de dialog apare atunci când unul dintre câmpuri este nul. Cum pot verifica dacă un buton radio este selectat?
Las's prefă-te că ai HTML astfel de prognoze
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
Pentru validare client-side, aici's ceva Javascript pentru a verifica care unul este selectat:
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
Cele de mai sus ar putea fi mai eficient în funcție de natura exactă de marcaj, dar că ar trebui să fie suficient pentru a obține ai început.
Daca're în căutarea doar pentru a vedea dacă orice buton radio este selectat oriunde pe pagina, PrototypeJS face foarte ușor.
Aici's o funcție care va returna true dacă cel puțin un buton radio este selectat undeva pe pagina. Din nou, acest lucru s-ar putea nevoie pentru a fi optimizat în funcție de specific HTML.
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
Pentru partea de server de validare (amintiți-vă, puteți't depinde în întregime pe Javascript pentru validare!), aceasta ar depinde de limba dvs. de a alege, dar'd dar verificarea " gen " valoarea cererii șir.
Cu jQuery, l'd fi ceva de genul
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
Lasă-mă să-l desfaci în bucăți să-l acopere mai clar. jQuery procesele de lucruri de la stânga la dreapta.
input[name=gender]:checked
input
limite de la intrare tag-uri.[numele=gen]
limitele de tag-uri cu numele de gen în grupul precedent.:verificat
limite de la casetele de selectare/butoane radio care sunt selectate în grupul precedent.Dacă doriți, pentru a evita acest totul, marca unul dintre butoanele radio ca a verificat (verificat="verificat"
) în codul HTML, care ar garanta că un singur buton radio este întotdeauna selectată.
O vanilie JavaScript mod
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;
}
}
Doar încercarea de a îmbunătăți pe Russ Cam's soluție cu un selector CSS zahăr amestecat cu vanilie JavaScript.
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
Nici o nevoie reală pentru jQuery aici, querySelectorAll este larg susținută de ajuns acum.
Editare: fixed un bug cu selector css, am'am inclus citate, deși le puteți omite, în unele cazuri, se poate't deci'e mai bine să le lase în.
Cod HTML
<input type="radio" nume="offline_payment_method" value="Cec" > <input type="radio" nume="offline_payment_method" value="Transfer" >Cod 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");
}
Puteți utiliza acest script simplu. Poate ai mai multe butoane radio cu același nume și valori diferite.
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-urile din aceasta pagina m-a ajutat să vină cu script-ul de mai jos, care cred că este mai completă și universală. Practic se va valida orice număr de butoane radio într-o formă, în sensul că se va asigura că un radio opțiune a fost selectată pentru fiecare dintre diferitele grupuri de radio în formă. e.g în formă de test de mai jos:
<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();">
La RadioValidator script-ul va asigurați-vă că un răspuns a fost dat pentru ambele 'test1' si 'test2' înainte de a-l susține. Puteți avea cât mai multe grupuri de radio în formă, iar aceasta va va ignora orice alte elemente de formă. Tot lipsă de radio răspunsuri vă va arăta într-un singur pop-up de alertă. Aici merge, sper că vă ajută oamenii. Orice bug de fixare sau de ajutor modificări binevenite :)
<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>
Notă acest comportament spirit jQuery când obtinerea de radio valorile de intrare:
$('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() );
});
Deci $('input[name="myRadio"]').val()
nu se întoarce verificat valoarea de intrare radio, ca s-ar putea aștepta-se întoarce primul buton radio's valoare.
Acest lucru ar fi valabil pentru butoane radio cu același nume, nu JQuery necesare.
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];
Dacă vorbim despre casetele de selectare și vrem o lista cu casetele de selectare verificat de partajare un nume:
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });
aceasta este o funcție de utilitate I'am creat pentru a rezolva această problemă
//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;
}
}
}
Cu 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)
Nu este foarte sofisticat, puteți valida dacă oricare dintre butoanele radio sunt verificate cu ECMA6 și metoda .unele()
.
Html:
<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />
Și javascript:
let htmlNodes = document.getElementsByName('status');
let radioButtonsArray = Array.from(htmlNodes);
let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);
isAnyRadioButtonChecked
va fi "adevărat" dacă unele dintre butoanele radio sunt verificate și "fals" dacă nici unul dintre ele sunt verificate.
Acest cod va alerta buton radio selectat atunci când formularul este depus. Este folosit jQuery pentru a obține valoarea selectată.
$("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>
Cu JQuery, un alt mod de a verifica starea curentă de butoane radio este de a obține atributul 'verificat'.
De Exemplu:
<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />
În acest caz, puteți verifica butoanele folosind:
if ($("#gender_male").attr("checked") == true) {
...
}
doar un pic lil modificare pentru a Marca Biek ;
COD 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>
și cod Javascript pentru a verifica dacă este selectat butonul radio
<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 "";
}
Acest lucru este, de asemenea, de lucru, evitându-pentru a apela pentru un element de identitate, dar numindu-l utilizați ca un element de matrice.
Următorul cod este bazat pe faptul că o matrice, numit ca butoane radio group, este compusă de butoane radio elemente în aceeași ordine ca și în cazul în care declarate în documentul 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;
}