当复选框被选中时，jQuery切换输入。

Question

我正在尝试构建类似WordPress选项部分的东西。当您单击复选框时，可以切换相应的字段的显示。我想使用一个函数来完成所有操作，以便不需要大量不同的函数。那么，使用像this之类的内容来切换相应的输入字段的更好解决方案是什么呢？我制作了一个快速的jsFiddle，但是当我使用复选框时，它会切换所有输入，因为我显然选择了所有输入。那么，使用像this之类的内容来切换相应的字段的更好解决方案是什么呢？谢谢提前http://jsfiddle.net/MEC9n/。

<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();
        });
    });

- Mitchell Layzell

---

你应该将你的代码嵌入到问题中。 - SomeShinyObject

jQuery：使用复选框切换输入文本 - ram4nd

Answer 1

This should help

Basic Solution

$(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();
});

Fiddle

- SomeShinyObject

---

太棒了，感谢您的时间！这可能是最干净的版本，谢谢！ - Mitchell Layzell

@MitchellLayzell 试试这个新的，我刚刚更新了。现在甚至不需要执行 .click()。 - SomeShinyObject

Answer 2

检查相应的属性name：

 $(document).ready(function(){
   $('input[type="checkbox"]').click(function(){
     var name = this.name; //<---------------------------this is faster
     $('.container').find('[name="'+name+'"]').toggle();
   });
});

FIDDLE

- Jai

---

哇，太棒了，非常感谢你们，也感谢大家的快速回复！ - Mitchell Layzell

Answer 3

使用类型和名称来与相应的文本框进行映射，就像这样：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
           $('input[type="text"][name="'+$(this).attr('name')+'"]').toggle();
    });
});

这是一个工作演示：http://jsfiddle.net/G5tN7/

希望它能对你有所帮助。

- Nishu Tayal

Answer 4

我向输入框添加了值，然后使用这些值的名称来分配类名并使用它们来切换输入框。这是JavaScript代码：

$(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>

这是一个jsfiddle链接：http://jsfiddle.net/MEC9n/1/

- theshadowmonkey