チックチェックボックスでテキストボックスを更新するJavascript

ティッキングチェックボックスでテキストボックスを更新するにはどうすればよいですか？次のコードを参照してください。チェックボックスをオンにすると、 'School'のみが入力されます。私は間違った言葉で3つの言葉をすべて記入したいと思います。チックチェックボックスでテキストボックスを更新するJavascript

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function updatebox() 
{ 
    var textbox = document.getElementById("list") 
    textbox.value = "" 

    if(document.getElementById('cb2').checked) { 
     textbox.value = "School" 
    } 

    if(document.getElementById('cb3').checked) { 
      textbox.value = textbox.value + " College " 
     } 

    if(document.getElementById('cb4').checked) { 
      textbox.value = textbox.value + " University" 
     } 
} 
</script> 
</head> 
<body> 
<input id="cb2" type="checkbox" name="vehicle" value="School" onclick="updatebox()" /> School <br /> 
<input id="cb3 "type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br /> 
<input id="cb4" type="checkbox" name="vehicle" value="University" onclick="updatebox()" /> University<br /> 
<input id="list" type="text" name="list" /> 

</body> 
</html>

出典

2012-03-25 Ershad K

あなたはあなたのためにHTMLのタイプミスで、それは"cb3 "と呼ばれていますいずれか（"cb3"と呼ばれるチェックボックスを持っていないので、あなたのスクリプトがthrowing an errorある - 最後にスペースで - またはそれはありません。 IDはすべて[spaces are not valid（IDで）]、ブラウザによって異なります）。タイプミスがなければmostly works as you intendedですが、学校がチェックされていないと、最初はスペースがあり、大学はチェックされていませんが大学は終わりにスペースがあります。

サイドノート＃1：あなたのコードは恐怖に頼っています（Automatic Semicolon Insertion）。私は強くお勧めしますに依存しています。必ず必要なすべてのセミコロンを含めます。

サイドノート＃2：「学校」にチェックを入れていない場合、スペースを避ける方法はたくさんあります。最も簡単なの一つは、ちょうどこの（私はセミコロンをも追加しました）のように、区切り文字としてスペースを持つ配列とArray#joinを使用することです：

function updatebox() 
{ 
    var textbox = document.getElementById("list"); 
    var values = []; 

    if(document.getElementById('cb2').checked) { 
     values.push("School"); 
    } 

    if(document.getElementById('cb3').checked) { 
     values.push("College"); 
    } 

    if(document.getElementById('cb4').checked) { 
     values.push("University"); 
    } 

    textbox.value = values.join(" "); 
}

Live example | label elementsラベルだけでなく、実際のボックスをクリック可能にすることにより、使用するチェックボックスがはるかに簡単に行うことができます：

サイドノート＃3がsource

<label><input id="cb2" type="checkbox" name="vehicle" value="School" onclick="updatebox()" /> School</label><br /> 
<label><input id="cb3" type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College</label><br /> 
<label><input id="cb4" type="checkbox" name="vehicle" value="University" onclick="updatebox()" /> University</label><br /> 
<input id="list" type="text" name="list" />

Live example |あなたはCB3を定義するライン上でタイプミス持ってsource

出典

2012-03-25 10:23:11

：

<input id="cb3 "type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br />

は

<input id="cb3" type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br />

また、あなたがあなたのJavascriptステートメントを完了するためにセミコロンを使用する必要がありますする必要があります。

修正されたコード：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function updatebox() 
{ 
    var textbox = document.getElementById("list"); 
    textbox.value = ""; 

    if(document.getElementById('cb2').checked) { 
     textbox.value = "School"; 
    } 

    if(document.getElementById('cb3').checked) { 
      textbox.value = textbox.value + " College "; 
     } 

    if(document.getElementById('cb4').checked) { 
      textbox.value = textbox.value + " University"; 
     } 
} 
</script> 
</head> 
<body> 
<input id="cb2" type="checkbox" name="vehicle" value="School" onclick="updatebox()" /> School <br /> 
<input id="cb3" type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br /> 
<input id="cb4" type="checkbox" name="vehicle" value="University" onclick="updatebox()" /> University<br /> 
<input id="list" type="text" name="list" /> 

</body> 
</html>

出典

2012-03-25 10:23:13

今では、おかげで動作します。 –

チックチェックボックスでテキストボックスを更新するJavascript

答えて

関連する問題