जवाबों:
आइए दिखाते हैं कि आपके पास इस तरह से HTML है
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />क्लाइंट-साइड सत्यापन के लिए, यहाँ एक जावास्क्रिप्ट की जांच की जाती है कि कौन सा चयनित है:
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}आपके मार्कअप की सटीक प्रकृति के आधार पर उपरोक्त को और अधिक कुशल बनाया जा सकता है लेकिन आपको शुरू करने के लिए पर्याप्त होना चाहिए।
यदि आप केवल यह देखना चाहते हैं कि क्या कोई रेडियो बटन पृष्ठ पर कहीं भी चुना गया है, तो प्रोटोटाइपोटाइप जेएस बहुत आसान बनाता है।
यहां एक फ़ंक्शन है जो पृष्ठ पर कहीं कम से कम एक रेडियो बटन चयनित होने पर सच लौटेगा। फिर से, इसे आपके विशिष्ट HTML के आधार पर ट्विक करने की आवश्यकता हो सकती है।
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}सर्वर-साइड सत्यापन के लिए (याद रखें, आप सत्यापन के लिए पूरी तरह से जावास्क्रिप्ट पर निर्भर नहीं कर सकते हैं!) , यह आपकी पसंद की भाषा पर निर्भर करेगा, लेकिन आप genderअनुरोध स्ट्रिंग के मूल्य की जांच करेंगे ।
JQuery के साथ , यह कुछ इस तरह होगा
if ($('input[name=gender]:checked').length > 0) {
// do something here
}मुझे इसे और अधिक स्पष्ट रूप से कवर करने के लिए टुकड़ों में तोड़ दें। jQuery बाएं से दाएं चीजों को संसाधित करता है।
input[name=gender]:checkedinput इसे इनपुट टैग तक सीमित करता है।[name=gender] इसे पिछले समूह के नाम लिंग के साथ टैग करने के लिए सीमित करता है।:checked इसे चेकबॉक्स / रेडियो बटन तक सीमित करता है जो पिछले समूह के भीतर चुने गए हैं।यदि आप इसे पूरी तरह से बचना चाहते हैं, checked="checked"तो HTML कोड में चेक किए गए ( ) के रूप में एक रेडियो बटन को चिह्नित करें , जो यह गारंटी देगा कि एक रेडियो बटन हमेशा चुना जाता है।
एक वेनिला जावास्क्रिप्ट तरीका है
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;
}
}name।
बस कुछ सीएल चयनकर्ता चीनी के साथ रशियन कैम के समाधान पर सुधार करने की कोशिश कर रहे हैं, जिसमें वेनिला जावास्क्रिप्ट शामिल है।
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;यहां jQuery की कोई वास्तविक आवश्यकता नहीं है, querySelectorAll को अब पर्याप्त रूप से समर्थित किया गया है।
संपादित करें: सीएसएस चयनकर्ता के साथ एक बग तय किया है, मैंने उद्धरण शामिल किए हैं, हालांकि आप उन्हें छोड़ सकते हैं, कुछ मामलों में तो आप उन्हें छोड़ना बेहतर नहीं कर सकते।
a[href^="http://"]) उनकी आवश्यकता होगी, और संगतता अधिक बनाए रखने योग्य है। इसके अलावा, यह विशेषता घोषणा को संबंधित HTML से मेल खाता है।
HTML कोड
<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >जावास्क्रिप्ट कोड:
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");
}आप इस सरल स्क्रिप्ट का उपयोग कर सकते हैं। आपके पास एक ही नाम और विभिन्न मूल्यों के साथ कई रेडियो बटन हो सकते हैं ।
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.
}document.forms[0].elements['nameOfRadioList'].value
इस पृष्ठ की स्क्रिप्ट ने मुझे नीचे दी गई स्क्रिप्ट के साथ आने में मदद की, जो मुझे लगता है कि अधिक पूर्ण और सार्वभौमिक है। मूल रूप से यह किसी भी प्रकार के रेडियो बटन को एक रूप में मान्य करेगा, जिसका अर्थ है कि यह सुनिश्चित करेगा कि प्रपत्र के भीतर विभिन्न रेडियो समूहों में से प्रत्येक के लिए एक रेडियो विकल्प चुना गया है। नीचे दिए गए परीक्षा फॉर्म में उदाहरण:
<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();">RadioValidator स्क्रिप्ट यह सुनिश्चित करेगी कि प्रस्तुत करने से पहले 'test1' और 'test2' दोनों के लिए एक उत्तर दिया गया है। आपके पास प्रपत्र में कई रेडियो समूह हो सकते हैं, और यह किसी भी अन्य तत्व तत्वों की उपेक्षा करेगा। सभी गुम रेडियो जवाब एक ही अलर्ट पॉपअप के अंदर दिखाई देंगे। यहाँ यह जाता है, मुझे आशा है कि यह लोगों की मदद करता है। किसी भी बग फिक्सिंग या सहायक संशोधनों का स्वागत :)
<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>रेडियो इनपुट मान प्राप्त करते समय इस व्यवहार पर ध्यान दें:
$('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() );
});तो $('input[name="myRadio"]').val()रेडियो इनपुट के चेक किए गए मान को वापस नहीं करता है, जैसा कि आप उम्मीद कर सकते हैं - यह पहले रेडियो बटन के मूल्य को लौटाता है।
मूटूल के साथ ( http://mootools.net/docs/core/Element/Element )
एचटीएमएल:
<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)यह एक उपयोगिता फ़ंक्शन है जिसे मैंने इस समस्या को हल करने के लिए बनाया है
//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;
}
}
}यह उसी नाम को साझा करने वाले रेडियो बटन के लिए मान्य होगा, जिसे किसी JQuery की आवश्यकता नहीं है।
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];अगर हम चेकबॉक्स के बारे में बात कर रहे हैं और हम चेकबॉक्स के साथ एक सूची चाहते हैं, तो एक नाम साझा करने की जाँच की:
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)मार्क बीवाईके के लिए सिर्फ एक लिटल बिट संशोधन;
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>और रेडियो बटन चुनने के लिए जावास्क्रिप्ट कोड की जाँच करें
<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>बहुत ही परिष्कृत तरीका है जिससे आप यह सत्यापित कर सकते हैं कि क्या ECMA6 और विधि के साथ किसी भी रेडियो बटन की जाँच की जाती है .some()।
एचटीएमएल:
<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />और जावास्क्रिप्ट:
let htmlNodes = document.getElementsByName('status');
let radioButtonsArray = Array.from(htmlNodes);
let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);isAnyRadioButtonCheckedहो सकता है trueकि कुछ रेडियो बटन चेक किए गए हों और falseयदि उनमें से कोई भी चेक नहीं किया गया हो।
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 "";
}JQuery के साथ, रेडियो बटन की वर्तमान स्थिति की जांच करने का एक और तरीका विशेषता 'जाँच' प्राप्त करना है।
उदाहरण के लिए:
<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />इस स्थिति में आप बटन का उपयोग करके देख सकते हैं:
if ($("#gender_male").attr("checked") == true) {
...
}$("#gender_male").attr("checked")एक स्ट्रिंग है "checked"और बूलियन नहीं है।
फॉर्म सबमिट होने पर यह कोड चयनित रेडियो बटन को अलर्ट करेगा। यह चयनित मान प्राप्त करने के लिए jQuery का उपयोग करता है।
$("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>मैंने स्प्रेड ऑपरेटर का इस्तेमाल किया और कुछ ने जांचने के लिए कि ऐरे में कम से कम एक एलीमेंट पास किया।
मैं किसकी चिंता के लिए साझा करता हूं।
var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);<input type="radio" name="gender" checked value="Male" />
<input type="radio" name="gender" value="Female" / >यहां वह समाधान दिया गया है, जिसे सबमिट करने के बाद आगे नहीं बढ़ने और रेडियो बटन चेक न करने पर अलर्ट भेजने की सलाह दी जाती है। बेशक इसका मतलब यह होगा कि आपको उन्हें शुरू करने के लिए अनियंत्रित होना पड़ेगा!
if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
alert ("You must select a button");
return false;
}बस प्रत्येक रेडियो बटन या स्क्रिप्ट के लिए आईडी ('रेडियो 1', 'रेडियो 2' या जिसे आप इसे कहते हैं) सेट करना न भूलें।
if (!document.getElementById('radio1').checked && !document.getElementById('radio2').checked) { alert(); }:।
एक उदाहरण:
if (!checkRadioArray(document.ExamEntry.level)) {
msg+="What is your level of entry? \n";
document.getElementById('entry').style.color="red";
result = false;
}
if(msg==""){
return result;
}
else{
alert(msg)
return result;
}
function Radio() {
var level = radio.value;
alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.")
}
function checkRadioArray(radioButtons) {
for(var r=0;r < radioButtons.length; r++) {
if (radioButtons[r].checked) {
return true;
}
}
return false;
} फार्म
<form name="teenageMutant">
<input type="radio" name="ninjaTurtles"/>
</form>लिपी
if(!document.teenageMutant.ninjaTurtles.checked){
alert('get down');
}फिडेल: http://jsfiddle.net/PNpUS/
मैं सिर्फ यह सुनिश्चित करना चाहता हूं कि कुछ चुने (jQuery का उपयोग करके):
// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female
// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
alert("Please select your gender.");
return false;
}यदि आप वेनिला जावास्क्रिप्ट चाहते हैं, तो प्रत्येक रेडियो बटन पर आईडी जोड़कर अपने मार्कअप को अव्यवस्थित नहीं करना चाहते हैं, और केवल आधुनिक ब्राउज़रों की परवाह करते हैं , निम्न कार्यात्मक दृष्टिकोण लूप के लिए मेरे लिए थोड़ा अधिक स्वादिष्ट है:
<form id="myForm">
<label>Who will be left?
<label><input type="radio" name="output" value="knight" />Kurgan</label>
<label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>
<script>
function getSelectedRadioValue (formElement, radioName) {
return ([].slice.call(formElement[radioName]).filter(function (radio) {
return radio.checked;
}).pop() || {}).value;
}
var formEl = document.getElementById('myForm');
alert(
getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>यदि न तो जाँच की जाती है, तो यह वापस आ जाएगी undefined(हालाँकि आप कुछ और वापस करने के लिए ऊपर की लाइन बदल सकते हैं, उदाहरण के लिए, falseवापस जाने के लिए , आप ऊपर दी गई प्रासंगिक पंक्ति को बदल सकते हैं:}).pop() || {value:false}).value; ।
रेडियो-नोडलिस्ट इंटरफ़ेस के बाद से फॉरवर्ड- लुकिंग पॉलीफ़िल दृष्टिकोण भी है क्योंकि valueफॉर्म चाइल्ड रेडियो तत्वों की सूची पर एक संपत्ति का उपयोग करना आसान होना चाहिए (जैसा कि उपरोक्त कोड में पाया गया है formElement[radioName]), लेकिन इसकी अपनी समस्याएं हैं: रेडियोफोडलिस्ट को पॉलीफ़िल कैसे करें ?
यह भी काम कर रहा है, एक तत्व आईडी के लिए कॉल करने से बचें, लेकिन इसे एरे तत्व के रूप में उपयोग करके कॉल करें।
निम्नलिखित कोड इस तथ्य पर आधारित है कि एक सरणी, जिसे रेडियोबुटन समूह कहा जाता है, को रेडियोोबुटन तत्वों द्वारा उसी क्रम में बनाया जाता है, जैसा कि वे 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>जावास्क्रिप्ट:
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;
}रेडियो बटन, एक ही नाम लेकिन अलग-अलग आईडी दें।
var verified1 = $('#SOME_ELEMENT1').val();
var verified2 = $('#SOME_ELEMENT2').val();
var final_answer = null;
if( $('#SOME_ELEMENT1').attr('checked') == 'checked' ){
//condition
final_answer = verified1;
}
else
{
if($('#SOME_ELEMENT2').attr('checked') == 'checked'){
//condition
final_answer = verified2;
}
else
{
return false;
}
}