我正在尝试构建类似 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();
});
});
最佳答案
这应该有帮助
基本解决方案
$(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();
});
关于选中复选框时 jQuery 切换输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15697823/