2013-11-28 8 views
0

두 번째 텍스트 박스를 변경하면 첫 번째 체크 박스가 체크됩니다. 두번째 체크 박스의 값이 변경되면 자동으로 체크됩니다. Onchange 텍스트 박스 자동 체크 박스

는 솔루션이처럼 자바 스크립트

<script type="text/javascript"> 
    var checkbox = document.getElementById("chbx"); 

    function checkbox_changed() { 
     checkbox.checked = true; 
    } 
</script> 

내 HTML

<input type="checkbox" id="chbx" onchange="checkbox_changed()"> 
<input type="text" id="chbx" onChange="checkbox_changed()" value="Value1"> 
<br> 
<input type="checkbox" id="chbx" onchange="checkbox_changed()"> 
<input type="text" id="chbx" onChange="checkbox_changed()" value="Value2"> 

입니다. 하지만 난 드롭 다운이 아니라 텍스트 상자를 사용합니다. http://jsfiddle.net/jfriend00/g3UQG/

답변

2

동일한 ID를 가진 네 개의 요소가 있습니다. HTML의 ID는 고유해야합니다.

+0

텍스트 상자를 사용하고 계십니까? – wewe

+0

그렇지 않을 수도 있습니다. HTML을 수정하고 유효하게 만들 때까지는 시간을 낭비하고 있습니다. 그것을 유효하게 만들고 그런 맥락에서 문제에 대한 해결책을 생각해보십시오. –

0

요소의 ID는 고유해야하므로 클래스를 사용하십시오. 타이

<input type="checkbox" class="chbx" /> 
<input type="text" class="chbx" value="Value1" /> 
<br/> 
<input type="checkbox" class="chbx"> 
<input type="text" class="chbx" value="Value2" /> 

$('.chbx[type="checkbox"]').change(function() { 
    if (!this.checked) { 
     $(this).next().val('') 
    } 
}) 
$('.chbx[type="text"]').change(function() { 
    $(this).prev().prop('checked', this.value != '') 
}).change() 

데모 : Fiddle 다음

+0

당신은 Jquery가 아니고 순수한 JavaScript 방식으로 제공해야합니다. – Khamidulla

+0

@antindexer 질문에 jQuery를 사용하여 태그가 붙어 있으며 jQuery를 사용하면 안되는 언급이 없다고 생각합니다. –

+0

선생님, 해결책을보고 싶습니다. 두 번째 텍스트 상자의 값을 변경하고 싶습니다. 두번째 체크 박스가 체크되었습니다 – wewe

0

당신을위한 HTML입니다 : 여기

<input type="checkbox" id="chbx" onchange="checkbox_changed()"> 
<input type="text" class="chk" onChange="checkbox_changed()" value="Value1"> 
<br> 
<input type="checkbox" class="chk" onchange="checkbox_changed()"> 
<input type="text" class="chk" onChange="checkbox_changed()" value="Value2"> 

그리고는 자바 스크립트입니다 :

<script type="text/javascript"> 
    $(function(){ 
     // when you check your chbx checkbox, other checkbox is checked too. 
     $("#chbx").change(function(){ 
     $('.chk').prop('checked', true); 
     }); 
    }); 
</script>