檢查 - 的JavaScript

假設我有以下HTML形式：檢查 - 的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>

我如何寫一個JavaScript功能，以確保至少一個無線電輸入已經被選擇？

來源

2012-10-25 cybertextron

我想你想複選框不是無線電... – elclanrs

循環訪問<input>標籤，檢查類型以及是否檢查。

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

來源

2012-10-25 01:27:48

像這樣的東西應該做的伎倆

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

UPDATE 沒有看到，它不應該有jQuery的，所以這裏的替代函數來檢查，在純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; 
}

來源

2012-10-25 01:26:24 pedrochaves

這個問題上沒有jQuery標籤。 –

沒有Jquery。 – cybertextron

行動，沒有看到。對不起=/ – pedrochaves

既然你說你需要知道，如果「至少一個輸入的選擇」，你可能想複選框，而不是單選按鈕。（您只能從一組共享一個name值單選按鈕中選擇一個單選按鈕。）

你或許應該刪除font標籤和過更新HTML一點點：

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

來源

2012-10-25 02:12:51

這是可能要在JavaScript做，如果你的目標瀏覽器都支持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>

注意，在鍍鉻你只需要把required上的一個輸入。我不確定其他瀏覽器是做什麼的。

我通常這樣做除了JavaScript驗證（如選定的答案），以便支持HTML 4瀏覽器。

來源

2013-08-27 18:29:45

這真是太棒了！ – suoyong

我這樣解決了。

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

來源

2018-01-02 21:11:48

檢查 - 的JavaScript

回答

相關問題