এইচটিএমএল ফর্মের মধ্যে আমার কাছে দুটি রেডিও বোতাম রয়েছে। কোনও একটি ক্ষেত্র শূন্য হলে একটি ডায়ালগ বাক্স উপস্থিত হয়। কোনও রেডিও বোতাম নির্বাচন করা হয়েছে কিনা তা আমি কীভাবে পরীক্ষা করতে পারি?
উত্তর:
আসুন ভান করুন আপনার এইচটিএমএল রয়েছে
<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
}
উপরের অংশটি আপনার মার্কআপের সঠিক প্রকৃতির উপর নির্ভর করে আরও দক্ষ করা যেতে পারে তবে এটি আপনাকে শুরু করার জন্য যথেষ্ট।
আপনি শুধু কিনা তা দেখতে খুঁজছেন কোনো রেডিও বাটন নির্বাচন করা হলে যে কোন জায়গায় পৃষ্ঠায়, PrototypeJS এটা খুব সহজ করে তোলে।
এখানে একটি ফাংশন যা সত্যে ফিরে আসবে যদি পৃষ্ঠার কোথাও কমপক্ষে একটি রেডিও বোতাম নির্বাচন করা হয়। আবার এটি আপনার নির্দিষ্ট এইচটিএমএলের উপর নির্ভর করে টুইঙ্ক করা দরকার।
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"তবে এইচটিএমএল কোডে চেকড ( ) হিসাবে একটি রেডিও বোতাম চিহ্নিত করুন , এটি গ্যারান্টিযুক্ত যে একটি রেডিও বোতাম সর্বদা নির্বাচিত রয়েছে।
একটি ভ্যানিলা জাভাস্ক্রিপ্ট উপায়
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 এর কোন সত্যিকারের প্রয়োজন নেই, ক্যোয়ারীস্লিেক্টরঅল এখন যথেষ্ট পরিমাণে সমর্থিত।
সম্পাদনা: সিএসএস নির্বাচকের সাথে একটি বাগ সংশোধন করেছি, আমি উদ্ধৃতিগুলি অন্তর্ভুক্ত করেছি, যদিও আপনি সেগুলি বাদ দিতে পারেন, কিছু ক্ষেত্রে আপনি এগুলি না রেখে দেওয়া ভাল।
a[href^="http://"]) তাদের প্রয়োজন হবে এবং ধারাবাহিকতা আরও রক্ষণাবেক্ষণযোগ্য। তদ্ব্যতীত, এটি বৈশিষ্ট্য ঘোষণাকে সংশ্লিষ্ট এইচটিএমএলের সাথে মেলাতে দেয়।
এইচটিএমএল কোড
<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.
}
এই পৃষ্ঠার স্ক্রিপ্টগুলি আমাকে নীচের স্ক্রিপ্টটি সামনে আসতে সহায়তা করেছিল, যা আমি মনে করি আরও সম্পূর্ণ এবং সর্বজনীন। মূলত এটি কোনও ফর্মের মধ্যে যে কোনও সংখ্যক রেডিও বোতামকে বৈধতা দেবে, যার অর্থ এটি নিশ্চিত করবে যে ফর্মের মধ্যে প্রতিটি রেডিও গ্রুপের জন্য একটি রেডিও বিকল্প নির্বাচন করা হয়েছে। যেমন নীচের পরীক্ষার ফর্ম:
<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();">
রেডিওভালিডেটর স্ক্রিপ্ট নিশ্চিত করবে যে এটি জমা দেওয়ার আগে 'টেস্ট 1' এবং 'টেস্ট 2' উভয়ের জন্য একটি উত্তর দেওয়া হয়েছে। ফর্মটিতে আপনার অনেকগুলি রেডিও গ্রুপ থাকতে পারে এবং এটি অন্য কোনও ফর্মের উপাদানগুলিকে উপেক্ষা করবে। সমস্ত নিখোঁজ রেডিও উত্তরগুলি একটি একক সতর্কতা পপআপের মধ্যে প্রদর্শিত হবে। এটি এখানে যায়, আমি আশা করি এটি মানুষকে সহায়তা করে। কোনও বাগ ফিক্সিং বা সহায়ক পরিবর্তন স্বাগত :)
<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>
রেডিও ইনপুট মানগুলি পাওয়ার সময় এই আচরণটি বুদ্ধিমান jQuery নোট করুন:
$('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;
}
}
}এটি একই নাম ভাগ করে নেওয়ার জন্য রেডিও বোতামগুলির জন্য বৈধ হবে, কোনও জিকুয়ের প্রয়োজন নেই।
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)মার্ক বাইকে কেবলমাত্র লিল বিট পরিবর্তন;
এইচটিএমএল কোড
<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>ইসিএমএ 6 এবং পদ্ধতিতে কোনও রেডিও বোতাম চেক করা হয়েছে কিনা তা যাচাই করতে পারবেন এমন অত্যাধুনিক উপায় .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 "";
}জিকুয়ের সাথে, রেডিও বোতামগুলির বর্তমান অবস্থা চেক করার আরেকটি উপায় হ'ল 'চেক করা' বৈশিষ্ট্যটি পাওয়া।
উদাহরণ স্বরূপ:
<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' বা আপনি যা কিছু বলেছেন) সেট করতে মনে রাখবেন না script
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]) এর তালিকাতে কোনও সম্পত্তি ব্যবহার করা সহজতর হওয়া উচিত বলেও সামনের দিকে তাকানো পলফিল পদ্ধতির রয়েছে , তবে এর নিজস্ব সমস্যা রয়েছে: কীভাবে পলফিল করবেন রেডিওনোডলিস্ট ?
এটিও কাজ করছে, একটি উপাদান আইডি কল করতে এড়ানো কিন্তু অ্যারে উপাদান হিসাবে এটি কল করা।
নিম্নলিখিত কোডটি এই সত্যের উপর ভিত্তি করে তৈরি করা হয়েছে যে এইচটিএমএল নথিতে যেখানে ঘোষিত হয়েছে তেমন ক্রমে রেডিওবোটন গ্রুপ হিসাবে পরিচিত একটি অ্যারে রেডিওব্যাটন উপাদান দ্বারা রচিত হয়েছে:
if(!document.yourformname.yourradioname[0].checked
&& !document.yourformname.yourradioname[1].checked){
alert('is this working for all?');
return false;
}এইচটিএমএল:
<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;
}রেডিও বোতাম, একই নাম কিন্তু বিভিন্ন আইডি দিন।
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;
}
}