체크 상자에 체크 상자가있는 경우 텍스트 상자를 업데이트하는 자바 스크립트

체크 박스의 체크 박스를 수정하려면 어떻게해야합니까? 다음 코드를 참조하십시오. 체크 박스를 클릭하면 '학교'만 채워집니다. 나는 세 단어 모두를 채우고 싶다. 끝에 공간 - - 아니면이없는 당신이 체크 박스 때문에 당신의 HTML에 오타 ("cb3"라고하지 않기 때문에체크 상자에 체크 상자가있는 경우 텍스트 상자를 업데이트하는 자바 스크립트

<!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

귀하의 스크립트는이 "cb3 "라고 하나, throwing an error입니다 ID는 모두 [spaces are not valid in ID]로 브라우저에 따라 다릅니다. 오타가 없으면 mostly works as you intended이지만 학교를 확인하지 않으면 처음에는 공간이 생기고 대학은 확인되지 않았지만 대학은 끝까지 공간이 생깁니다.

사이드 노트 # 1 : 코드가 공포에 의지하고 있습니다 (Automatic Semicolon Insertion). 나는 그것에 대해이 아닌 을 강력하게 추천합니다. 항상 필요한 모든 세미콜론을 포함하십시오.

사이드 노트 # 2 : "School"에 틱 표시가되어 있지 않으면 공간을 사용하지 않는 방법은 많이 있습니다. 가장 쉬운 방법 중 하나는 (나는 또한 세미콜론 추가 한)과 같이 분리로 공간 배열 및 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을 | source

사이드 노트 # 3 : label elements 실제 상자뿐만 아니라 라벨에 클릭 수 있도록하여 사용 확인란을 훨씬 쉽게 만들 수 있습니다

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

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

은 또한 당신이 당신의 자바 스크립트 문을 완료 세미콜론을 사용해야해야한다 : source

출처

2012-03-25 10:23:11

당신은 당신이 CB3를 정의하는 줄에 오타가 있어요.

수정 코드 :

<!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

지금 작동, 감사합니다. –

체크 상자에 체크 상자가있는 경우 텍스트 상자를 업데이트하는 자바 스크립트

답변

관련 문제