ฉันจะตรวจสอบได้อย่างไรว่ามีการเลือกปุ่มตัวเลือกด้วย JavaScript

ฉันมีปุ่มตัวเลือกสองปุ่มในฟอร์ม HTML กล่องโต้ตอบปรากฏขึ้นเมื่อหนึ่งในเขตข้อมูลเป็นโมฆะ ฉันจะตรวจสอบว่าเลือกปุ่มตัวเลือกได้อย่างไร

สมมติว่าคุณมี HTML แบบนี้

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

สำหรับการตรวจสอบด้านไคลเอนต์นี่คือ Javascript เพื่อตรวจสอบสิ่งที่เลือก:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

ข้างต้นอาจมีประสิทธิภาพมากขึ้นโดยขึ้นอยู่กับลักษณะที่แน่นอนของมาร์กอัปของคุณ แต่ควรจะเพียงพอสำหรับการเริ่มต้น

หากคุณกำลังมองหาเพียงเพื่อดูว่าใด ๆเลือกปุ่มใดก็ได้บนหน้าPrototypeJSทำให้มันง่ายมาก

นี่คือฟังก์ชั่นที่จะกลับมาเป็นจริงหากเลือกปุ่มตัวเลือกอย่างน้อยหนึ่งที่ในหน้า อีกครั้งสิ่งนี้อาจต้องมีการปรับแต่งขึ้นอยู่กับ HTML ของคุณโดยเฉพาะ

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

สำหรับการตรวจสอบฝั่งเซิร์ฟเวอร์(จำไว้ว่าคุณไม่สามารถพึ่งพา Javascript สำหรับการตรวจสอบความถูกต้องได้ทั้งหมด)มันจะขึ้นอยู่กับภาษาที่คุณเลือก แต่คุณจะต้องตรวจสอบgenderค่าของสตริงคำขอ

ด้วยjQueryมันจะเป็นอย่างนั้น

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

ขอผมแยกมันเป็นชิ้น ๆ เพื่อให้ชัดเจนยิ่งขึ้น jQuery ประมวลผลจากซ้ายไปขวา

input[name=gender]:checked

1. input จำกัด ไว้ที่แท็กอินพุต
2. [name=gender] จำกัด เฉพาะแท็กที่มีชื่อเพศภายในกลุ่มก่อนหน้า
3. :checked จำกัด ไว้ที่ช่องทำเครื่องหมาย / ปุ่มตัวเลือกที่เลือกไว้ในกลุ่มก่อนหน้า

หากคุณต้องการหลีกเลี่ยงปัญหานี้พร้อมกันให้ทำเครื่องหมายปุ่มตัวเลือกหนึ่งตัวตามที่เลือก ( checked="checked") ในรหัส HTML ซึ่งจะรับประกันได้ว่าจะมีการเลือกปุ่มตัวเลือกหนึ่งปุ่มเสมอ

วิธีการวานิลลา JavaScript

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;       
    }
}

เพียงแค่พยายามปรับปรุงวิธีการแก้ปัญหาของ Russ Camด้วยตัวเลือก CSS บางอย่างที่ถูกโยนด้วย vanilla JavaScript

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

ไม่จำเป็นต้องใช้ jQuery ที่นี่แบบสอบถาม querySelect ได้รับการสนับสนุนอย่างกว้างขวางเพียงพอแล้ว

แก้ไข:แก้ไขข้อผิดพลาดด้วยตัวเลือก css ฉันได้ใส่เครื่องหมายอัญประกาศถึงแม้ว่าคุณสามารถละเว้นได้ แต่ในบางกรณีคุณไม่สามารถทำได้ดีกว่าปล่อยไว้

รหัส HTML

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

รหัส 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");
}

คุณสามารถใช้สคริปต์ง่าย ๆ นี้ คุณอาจมีปุ่มตัวเลือกหลายตัวที่มีชื่อเหมือนกันและมีค่าต่างกัน

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();">

สคริปต์ 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>

หมายเหตุพฤติกรรมนี้ด้วย 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()จะไม่ส่งคืนค่าการตรวจสอบของอินพุตวิทยุตามที่คุณคาดหวังเพราะมันจะส่งคืนค่าของปุ่มตัวเลือกแรก

ด้วย 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)

นี่คือฟังก์ชั่นยูทิลิตี้ที่ฉันสร้างขึ้นเพื่อแก้ปัญหานี้

    //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)

เพียงแค่ปรับเปลี่ยนเล็กน้อยเพื่อ Mark 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>

และรหัส Javascript เพื่อตรวจสอบว่ามีการเลือกปุ่มตัวเลือกหรือไม่

<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()และวิธีการคือ

Html:

<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หากไม่ได้ทำการเลือก

ส่งคืนองค์ประกอบที่ตรวจสอบทั้งหมดในปุ่มตัวเลือก

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

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) {
...
}

รหัสนี้จะแจ้งเตือนปุ่มตัวเลือกที่เลือกเมื่อส่งแบบฟอร์ม มันใช้ 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;
}

เพียงจำไว้ว่าให้ตั้งรหัส ('radio1', 'radio2' หรืออะไรก็ตามที่คุณเรียกว่ามัน) ในรูปแบบของปุ่มตัวเลือกแต่ละปุ่มมิฉะนั้นสคริปต์จะไม่ทำงาน

ตัวอย่าง:

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;
}

ถ้าคุณต้องการที่วานิลลา JavaScript, ไม่ต้องการที่จะถ่วงมาร์กอัปของคุณโดยการเพิ่มรหัสในแต่ละปุ่มและจะดูแลเกี่ยวกับเบราว์เซอร์ที่ทันสมัย , วิธีการทำงานต่อไปนี้เป็นเล็ก ๆ น้อย ๆ ที่มีรสนิยมมากขึ้นกว่าที่ฉันสำหรับห่วง:

<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;)

นอกจากนี้ยังมีวิธีการโพลีฟิลที่มองไปข้างหน้าเนื่องจากอินเตอร์เฟสRadioNodeListควรทำให้ง่ายต่อการใช้valueคุณสมบัติในรายการองค์ประกอบวิทยุเด็กในรูปแบบ (พบในรหัสด้านบนเป็นformElement[radioName]) แต่มีปัญหาของตัวเอง: วิธีโพลีฟิลล์ RadioNodeList ?

สิ่งนี้ยังใช้งานได้โดยหลีกเลี่ยงการเรียกใช้รหัสองค์ประกอบ แต่เรียกมันว่าใช้เป็นองค์ประกอบอาร์เรย์

รหัสต่อไปนี้ขึ้นอยู่กับข้อเท็จจริงที่ว่าอาร์เรย์ชื่อกลุ่ม radiobuttons ประกอบด้วยองค์ประกอบ radiobuttons ในลำดับเดียวกันกับที่มีการประกาศไว้ในเอกสาร 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;
}

กำหนดปุ่มตัวเลือกชื่อเดียวกัน แต่มี ID ต่างกัน

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;
   }
}