当使用jquery取消选中复选框时隐藏文本 [英] hide text when checkbox is unchecked using jquery
问题描述
默认情况下,复选框处于选中状态。如果未选中,它们应该隐藏文本。如何隐藏或显示jquery中的文本?
the checkboxes are checked by default. if unchecked they should hide the text. how do i hide or show the text in jquery?
html:
<div class="check">
<p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>
<p><input type="checkbox" value="Reference " id="reference" checked /> <label for="reference">Reference</label></p>
</div>
<div id="nametxt"> Show Name TEXT </div>
<div id="reftxt"> Show Ref TEXT </div>
推荐答案
更改 ; div id =reftxt>
到< div id =referencetxt>
,然后你可以这样做:
Change the id of <div id="reftxt">
to <div id="referencetxt">
and then you can do this:
$('div.check input:checkbox').bind('change',function(){
$('#'+this.id+'txt').toggle($(this).is(':checked'));
});
如果点击更改事件,或者有人使用键盘检查/取消选中复选框,
The change event will fire if its clicked on or if someone uses the keyboard to check/uncheck the checkbox.
只要 ID
的文本div总是 +'txt'
,并且在 div.check
,然后这将处理这些。保持您不必重复自己,因为您有更多的复选框。
As long as the ID
's of the text divs are always checkbox ID + 'txt'
and are in div.check
then this will handle those too. Keeps you from having to repeat yourself as you get more checkboxes.
这篇关于当使用jquery取消选中复选框时隐藏文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!