2013-11-28 116 views
0

當我更改第二個文本框時,第一個複選框將檢查。我想要的是當更改第二個文本框的值時,第二個複選框會自動檢查。Onchange文本框自動複選框

這是我的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"> 

的Javascript

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

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

解決方案是這樣的。但我使用文本框不是一個下拉菜單。 http://jsfiddle.net/jfriend00/g3UQG/

回答

2

您有四個具有相同ID的元素。 HTML中的ID必須是唯一的。

+0

它使用文本框? – wewe

+0

它可能或不可能。在你修復HTML並使其有效之前,你正在浪費你的時間。讓它有效,然後在這種情況下考慮解決您的問題。 –

0

元素的ID必須是唯一的,所以請使用class代替。

<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

你應該提供純粹的JavaScript方式不在Jquery – 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"> 

這裏是JavaScript:

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