sprawdzenie, czy został wybrany co najmniej jeden przycisk radiowy - JavaScript

Podobno miałem następującą postać: HTMLsprawdzenie, czy został wybrany co najmniej jeden przycisk radiowy - JavaScript

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Choose</title> 
</head> 

<body> 
    <form method="post" enctype="application/x-www-form-urlencoded"> 
    <h1>Choose</h1> 

    <p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br> 
    <br> 
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br> 
    <br> 
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br> 
    <br> 
    <input type="submit" name="Submit" value="Go"></p> 
    </form> 


</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>

Jak mogę napisać JavaScript funkcji, aby upewnić się co najmniej jedno wejście radiowy został wybrany?

Źródło

2012-10-25 cybertextron

Chyba chcesz, aby pola wyboru nie były wyposażone w ... – elclanrs

Zapętlanie tagów <input>, sprawdź typ i czy jest zaznaczone.

function isOneChecked() { 
    // All <input> tags... 
    var chx = document.getElementsByTagName('input'); 
    for (var i=0; i<chx.length; i++) { 
    // If you have more than one radio group, also check the name attribute 
    // for the one you want as in && chx[i].name == 'choose' 
    // Return true from the function on first match of a checked item 
    if (chx[i].type == 'radio' && chx[i].checked) { 
     return true; 
    } 
    } 
    // End of the loop, return false 
    return false; 
}

Here it is in action on jsfiddle

Źródło

2012-10-25 01:27:48

Coś takiego powinno wystarczyć

if ($("input[type=radio]:checked").length > 0) { 
    // Do your stuff here 
}

UPDATE nie widzi, że to nie powinno mieć jQuery, więc tutaj jest alternatywą funkcja, aby sprawdzić, w czystym JS

function check(){ 
    var radios = document.getElementsByName("choice"); 

    for (var i = 0, len = radios.length; i < len; i++) { 
      if (radios[i].checked) { 
       return true; 
      } 
    } 

    return false; 
}

Źródło

2012-10-25 01:26:24 pedrochaves

Nie ma znacznika jQuery na to pytanie. –

Bez Jquery. – cybertextron

Ops, nie widziałem tego. Sorry =/ – pedrochaves

Ponieważ powiedziałeś, że chciał wiedzieć, czy „co najmniej jedno wejście jest zaznaczone”, prawdopodobnie chcesz wyboru zamiast przycisków radiowych. (Można wybrać tylko jedną opcję w czasie z grupy przycisków radiowych, które podzielają wartości name).

Powinieneś raczej upuść font tagi i zaktualizować HTML trochę zbyt:

HTML

<h1>Choose</h1> 
<div> 
    <input type="checkbox" id="ckb-psychology" name="choose" value="psychology"> 
    <label for="ckb-psychology" class="blue">Instant Psychology</label> 
</div> 
<div> 
    <input type="checkbox" id="ckb-geography" name="choose" value="geography"> 
    <label for="ckb-geography" class="red">Instant Geography</label> 
</div> 
<div> 
    <input type="checkbox" id="ckb-gastronomy" name="choose" value="gastronomy"> 
    <label for="ckb-gastronomy" class="purple">Instant Gastronomy</label> 
</div> 
<input type="submit" name="Submit" value="Go">

CSS

label { font-size: 1.5em; } 

.blue { color: #0033CC; } 
.red { color: #CC0000; } 
.purple { color: #660033; }

JavaScript

function isOneChecked (name) { 

    var checkboxes = document.getElementsByName(name), 
     i = checkboxes.length - 1; 

    for (; i > -1 ; i--) { 

     if (checkboxes[i].checked) { return true; } 

    } 

    return false; 
}

Źródło

2012-10-25 02:12:51

Jest to możliwe do zrobienia bez javascript jeśli docelowego przeglądarek obsługuje atrybut HTML5 required.

<input type="radio" name="choose" value="psychology" required> 
<input type="radio" name="choose" value="geography" required> 
<input type="radio" name="choose" value="gastronomy" required>

Należy zauważyć, że w chromie trzeba tylko umieścić required na jednym z wejść. Nie jestem pewien, co robią inne przeglądarki.

Zwykle robię to oprócz sprawdzania poprawności javascript (podobnie jak wybrane odpowiedzi), aby również obsługiwane były przeglądarki HTML 4.

Źródło

2013-08-27 18:29:45

to jest cudowne !!! – suoyong

Rozwiązałem to w ten sposób.

if(document.querySelector('input[name="choice"]:checked') == null) { 
    window.alert("You need to choose an option!"); 
}

Źródło

2018-01-02 21:11:48

sprawdzenie, czy został wybrany co najmniej jeden przycisk radiowy - JavaScript

Odpowiedz

Powiązane problemy