নির্বাচিত রেডিও বোতামটির মান কীভাবে পাবেন?

Question

আমার জেএস প্রোগ্রামটিতে আমার কিছু অদ্ভুত সমস্যা হচ্ছে। আমার এটি সঠিকভাবে কাজ করা ছিল তবে কোনও কারণে এটি আর কাজ করে না। আমি কেবল রেডিও বোতামটির মান খুঁজে পেতে চাই (কোনটি নির্বাচিত) এবং এটিকে পরিবর্তনশীলতে ফিরিয়ে দিতে পারি। কিছু কারণে এটি ফিরতে থাকে undefined।

আমার কোডটি এখানে:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

এইচটিএমএল:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

Comments

— জেএস

Answer 1

আপনি এর মতো কিছু করতে পারেন:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    // do whatever you want with the checked radio
    alert(radios[i].value);

    // only one radio can be logically checked, don't check the rest
    break;
  }
}

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

সম্পাদনা করুন: আপনার সম্পাদনা পরামর্শের জন্য ধন্যবাদ হ্যাচা এবং জেপসেটং

Comments

এটি jquery 1.7 এর জন্য কাজ করছিল তবে এখন jQuery 1.9 এর সঠিক বাক্য গঠনটি হ'ল '(' ইনপুট [নাম = "লিঙ্গস"]: চেক করা ') val ভ্যাল (); (@ সরান)

— jptsetung

আমি বিশ্বাস করি যে @সিনট্যাক্সটি তারও আগে ছাপিয়ে গেছে (জেকারি 1.2)

— টম পিট্রোসন্তি

@ টমপিট্রোসন্তি ডকুমেন্টেশনটি কিছুটা দূরে দেখা যাচ্ছে, jsfiddle.net/Xxxd3/608 <1.7.2 তে কাজ করে তবে> 1.8.3 এ কাজ করে না। নির্বিশেষে, @অবশ্যই অবশ্যই মুছে ফেলা উচিত

— jbabey

হ্যাঁ, দেখে মনে হচ্ছে তারা সেখানে কিছুটা পিছনের সামঞ্জস্য রেখেছিল, কিন্তু মেলানোর জন্য ডক্সকে আপডেট করে নি। আমার কিছু হুপলা মনে আছে যখন তারা কিছু অবমূল্যায়নযুক্ত বৈশিষ্ট্যগুলি ফেলেছিল যা এখনও বহুল ব্যবহৃত ছিল, তাই তারা আবার সমর্থন যোগ করে Maybe সম্ভবত এ কারণেই ...

— টম পাইট্রসন্তি

document.querySelector()সম্ভবত এখন সরাসরি জাভাস্ক্রিপ্টে প্রস্তাবিত পদ্ধতির হওয়া উচিত।

— ডেভ

Answer 2

এটি যে কোনও এক্সপ্লোরারের সাথে কাজ করে।

document.querySelector('input[name="genderS"]:checked').value;

কোনও ইনপুট ধরণের মান পাওয়ার জন্য এটি একটি সহজ উপায়। এছাড়াও আপনি না না jQuery এর পাথ অন্তর্ভুক্ত করতে হবে।

Comments

ডকুমেন্ট.কোয়ারিলেক্টর () ব্যবহার করা একটি খাঁটি জাভাস্ক্রিপ্ট উত্তর: বিকাশকারী.মোজিলা.আর.ইন

— ইউএস

আপনি যদি এটি কোনও ভেরিয়েবেলে সংরক্ষণ করেন এবং কোনও রেডিওবটন বাছাই না করা হয় তবে আপনি ব্রাউজারটি থামিয়ে দেবেন। কনসোল বলেছেন: TypeError document.querySelector(...)is null।

— আমাকে কল করুন

এটি কেবলমাত্র নির্বাচিত হলে কাজ করে। সুতরাং আপনার আগে এটি পরীক্ষা করা উচিত। var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);

— মার্কাস জেলার

আমি উল্কাপাত্রে টেমপ্লেটগুলির সাথে কাজ করছি, এবং সেই :checkedকৌশলটি আমার পক্ষে এটি সম্পূর্ণভাবে accountType = template.find("[name='optradio']:checked").value;

— পেরেছিল

আমার একটি এন্টারপ্রাইজ পরিবেশ রয়েছে যেখানে এটি আই 11 এ ধারাবাহিকভাবে কাজ করে না - এক ধরণের পিছনের সামঞ্জস্যতা মোড।

— স্টিভ ব্ল্যাক

Answer 3

document.forms.your-form-name.elements.radio-button-name.value

Comments

এটিও কাজ করে:document.forms.your-form-name.name-shared-by-radio-buttons.value

— ওয়েব_ডিজাইনার

আমি মনে করি বেশিরভাগ লোক এটিকে উপেক্ষা করছে। গৃহীত উত্তর কাজ করে। জর্গোস সাকোনাস উত্তরটি আরও ভাল। তবে এটি হ'ল মৌলিকভাবে সঠিক উত্তর। এই এক কীভাবে রেডিও বোতাম আসলে কাজ করে। মনে রাখবেন যে যদি কিছু না নির্বাচিত হয় তবে এটি একটি খালি স্ট্রিং দেয়।

— গোল্ডফেইনকে

@ ওয়েব_ডিজাইনার আপনার মন্তব্যটিও কি সত্যিকারের উত্তর হওয়া উচিত নয়?

— ভাবলিপি

আপনার রেডিও ইনপুটটি কোনও ফর্ম না থাকলে এটি কাজ করে না তাই আমি মনে করি না যে এটি ক্যোয়ারী নির্বাচনকারীর চেয়ে ভাল উত্তর, সম্ভবত এই দুটি সংযুক্ত করা উচিত।

— টোম হ্যাবলবাউয়ার

যদি আপনার রেডিওগুলি লেবেলের অভ্যন্তরে থাকে তবে এইভাবে কাজ করবে না

— ইগর ফোমেনকো

Answer 4

যেহেতু jQuery 1.8, কোয়েরির জন্য সঠিক বাক্য গঠন

$('input[name="genderS"]:checked').val();

আর $('input[@name="genderS"]:checked').val();নয়, যা jQuery 1.7 এ কাজ করেছিল ( @ সহ )।

Answer 5

ECMAScript 6 সংস্করণ

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

Answer 6

সহজ সমাধান:

 document.querySelector('input[name=genderS]:checked').value

Comments

দুটি কারণে আপ-ভোট দিয়েছেন: ১. এটি কাজ করে। ২. এটি কোনও খোঁড়া উত্তর ছিল না।

— জন

এটি @ জিয়েরগোস সাকোনাসের উত্তরটির সঠিক অনুলিপি যা এক বছর আগে দেওয়া হয়েছিল।

— টি এনগুইন

Answer 7

এটা চেষ্টা কর

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

এখানে একটি ঝাঁকুনি ।

Answer 8

সম্পাদনা করুন: চিপস_100 দ্বারা যেমনটি আপনার ব্যবহার করা উচিত:

var sizes = document.theForm[field];

সরাসরি পরীক্ষার চলকটি ব্যবহার না করেই।

---

পুরানো উত্তর:

আপনি কি evalএই পছন্দ করবেন না ?

var sizes = eval(test);

এটি কীভাবে কাজ করে তা আমি জানি না তবে আমার কাছে আপনি কেবল একটি স্ট্রিং অনুলিপি করছেন।

Comments

eval এখানে সেরা বিকল্প নয় ... আপনি var sizes = document.theForm[field];প্রথম অ্যাসাইনমেন্টটি বলতে এবং মুছতে চান , সুতরাং testভেরিয়েবলটি আর ব্যবহার করবেন না।

— ডেনিস

আমার জ্ঞানের জন্য, কাজ হিসাবে বিবর্তিত হবে? বা এটি শুধুমাত্র সাথে কাজ করবে eval('var sizes=document.theForm.' + field)?

— মাইকেল লাফার্গু

আপনার উত্তরের var sizes = eval(test);স্পষ্ট বিবৃতিটি সেভাবে কাজ করবে (আমি কেবল এটি ফায়ারবগে পরীক্ষা করেছি))

— ডেনিস

এটি আরও অর্থবোধ করে, তবে আমি যেখানে fieldবন্ধনীগুলি রেখেছিলাম সেই লাইনে একটি "অপ্রত্যাশিত টোকেন [" পেয়েছি । কোন অনুমান কেন?

— এমকিং

Answer 9

এটি একটি নিখুঁত জাভাস্ক্রিপ্ট, @ ফন্টাসের উত্তরের ভিত্তিতে তবে সুরক্ষা কোড সহ একটি খালি স্ট্রিং ফিরে (এবং একটি এড়ান TypeError) যদি কোনও নির্বাচিত রেডিও বোতাম না থাকে:

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

কোডটি এইভাবে ভেঙে যায়:

• লাইন 1: নিয়ন্ত্রণের জন্য একটি রেফারেন্স পান যে (ক) একটি <input>প্রকার, (খ) এর একটি nameবৈশিষ্ট্য রয়েছে genderSএবং (সি) পরীক্ষা করা হয়েছে।
• লাইন 2: যদি এমন নিয়ন্ত্রণ থাকে তবে এর মানটি ফিরিয়ে দিন। যদি তা না থাকে তবে খালি স্ট্রিংটি ফিরিয়ে দিন। genderSRadioপরিবর্তনশীল truthy হলে লাইন 1 খুঁজে বের করে নিয়ন্ত্রণ ও নাল / falsey যদি এটা না।

জিকুয়েরির জন্য @ জবাবির উত্তরটি ব্যবহার করুন এবং নোট করুন যে কোনও নির্বাচিত রেডিও বোতাম না থাকলে এটি ফিরে আসবে undefined।

Answer 10

যদি কেউ উত্তর খুঁজতে থাকে এবং আমার মতো এখানে পৌঁছেছে তবে ক্রোম 34 এবং ফায়ারফক্স 33 থেকে আপনি নিম্নলিখিতটি করতে পারেন:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

বা সরল:

alert(document.theForm.genderS.value);

পুনঃপ্রকাশ: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/ মূল্য

Answer 11

এখানে রেডিওগুলির একটি উদাহরণ যেখানে কোনও পরীক্ষিত = "পরীক্ষিত" বৈশিষ্ট্য ব্যবহার করা হয় না

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

ডেমো : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ কোন রেডিও নির্বাচন না করে সন্ধান করুন ]

সূত্র: http://bloggerplugnplay.blogspot.in/2013/01/ediaateget-checked-radio-value-in.html

Answer 12

সরল জাভাস্ক্রিপ্ট সহ চেক করা রেডিও বোতামটির মান পাওয়ার জন্য এখানে একটি দুর্দান্ত উপায়:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

সূত্র: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

এই এইচটিএমএল ব্যবহার:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

এছাড়াও আপনি ব্যবহার করতে পারে এরে খুঁজুনchecked সম্পত্তি টি চেক করা আইটেম দেখুন:

Array.from(form.elements.characters).find(radio => radio.checked);

Answer 13

খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে, আপনি ইভেন্টটি প্রেরণকারী অবজেক্টের রেফারেন্স পরিচালনা করতে পারেন।

function (event) {
    console.log(event.target.value);
}

Answer 14

ধরা যাক আপনাকে কোনও ফর্মের রেডিও বোতামের বিভিন্ন সারি লাগাতে হবে, প্রতিটি পৃথক বৈশিষ্ট্যযুক্ত নাম ('বিকল্প 1', 'বিকল্প 2' ইত্যাদি) তবে একই শ্রেণীর নাম সহ। সম্ভবত আপনার এগুলি একাধিক সারিতে দরকার যেখানে তারা প্রতিটি প্রশ্নের সাথে সম্পর্কিত 1 থেকে 5 স্কেলের উপর ভিত্তি করে একটি মান জমা দেবে। আপনি আপনার জাভাস্ক্রিপ্ট যেমন লিখতে পারেন:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

আমিও ফর্মের সাথে জমা দেওয়ার জন্য একটি চূড়ান্ত ফর্ম উপাদানটিতে চূড়ান্ত আউটপুট প্রবেশ করিয়ে দেব।

Answer 15

 document.querySelector('input[name=genderS]:checked').value

Answer 16

যদি আপনার ফর্ম উপাদানটির জন্য কোনও আইডি নির্ধারণ করা সম্ভব হয় (), এই উপায়টিকে নিরাপদ বিকল্প উপায় হিসাবে বিবেচনা করা যেতে পারে (বিশেষত যখন রেডিও গ্রুপের উপাদান নাম নথিতে অনন্য নয়):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

এইচটিএমএল:

<form action="#n" name="theForm" id="yourFormId">

Answer 17

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

ইত্যাদি ঠিক তখন ব্যবহার করুন

  $("#rdbExamples:checked").val()

অথবা

   $('input[name="rdbExampleInfo"]:checked').val();

Answer 18

    var value = $('input:radio[name="radiogroupname"]:checked').val();