2013-11-28 75 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>