チェックする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>

私は少なくとも1つの無線入力が選択されていることを確認する JavaScript関数を書くことができますどのように

？このような

出典

2012-10-25 cybertextron

私はこの質問にはjQueryのタグがありません – 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 
}

は、ないのjQueryを持っているはずのことを見なかったUPDATEは、ので、ここで純粋な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なし。 – cybertextron

Opsは、それを見ていませんでした。申し訳ありません=/ – pedrochaves

あなたは「は、少なくとも一つの入力が選択されている」かどうかを知るために必要な言ったので、あなたはおそらく、むしろラジオボタンよりチェックボックスをしたいです。（あなただけのname値を共有するラジオボタンのグループから一度に1つのラジオボタンを選択することができます。）

おそらく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

あなたのターゲットにブラウザがHTML5 required属性をサポートする場合、これはjavascriptをせずに行うことが可能です。

<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

答えて

関連する問題