我正在尝试构建类似wordpress选项的部分。当您单击复选框时可以切换相应<input type="text">
字段的显示,我想在一个函数中执行此操作,因此我没有大量不同的函数,因此切换相应的最佳方法是什么使用复选框输入,我做了一个快速的jsFiddle,但是当我使用我的复选框时,它切换所有输入,因为我显然选择了所有这些,所以使用像this
之类的东西是什么更好的解决方案相应字段,提前感谢,http://jsfiddle.net/MEC9n/
HTML
<div class="options">
<input type="checkbox" name="title"><label>Title</label>
<input type="checkbox" name="author"><label>Author</label>
<input type="checkbox" name="category"><label>Category</label>
</div>
<div class="container">
<form method="post">
<input type="text" name="title" placeholder="Title:">
<input type="text" name="author" placeholder="Author:">
<input type="text" name="category" placeholder="Category:">
<input type="submit" value="Submit">
</form>
</div>
的jQuery
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
$('input[type="text"]').toggle();
});
});
答案 0 :(得分:7)
这应该有帮助
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var item = $(this).attr('name');
$('input[name="'+item+'"][type="text"]').toggle();
});
});
如果你真的想提高效率,可以扩展jQuery
$(document).ready(function () {
jQuery.fn.rmCorrespondingText = function () {
var context = $(this);
context.bind('click', function () {
var item = context.attr('name');
$('input[name="' + item + '"][type="text"]').toggle();
});
};
$('input[type="checkbox"]').rmCorrespondingText();
});
答案 1 :(得分:2)
检查相应的属性name
:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var name = this.name; //<---------------------------this is faster
$('.container').find('[name="'+name+'"]').toggle();
});
});
答案 2 :(得分:1)
使用类型和名称一起映射相应的文本框,如下所示:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
$('input[type="text"][name="'+$(this).attr('name')+'"]').toggle();
});
});
以下是工作演示:http://jsfiddle.net/G5tN7/
我希望,这对你有用。
答案 3 :(得分:0)
我在输入中添加了值,然后使用值名称来指定类名并使用它来切换输入。 这是JS
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var value = $(this).val();
$('.' + value).toggle();
});
});
这是HTML
<div class="options">
<input type="checkbox" name="title" value="title"><label>Title</label>
<input type="checkbox" name="author" value="author"><label>Author</label>
<input type="checkbox" value="author" name="category"><label>Category</label>
</div>
<div class="container">
<form method="post">
<input class="title" type="text" name="title" placeholder="Title:">
<input type="text" class="author" name="author" placeholder="Author:">
<input type="text" class="category" name="category" placeholder="Category:">
<input type="submit" value="Submit">
</form>
</div>