jQuery 选中复选框时的jQuery切换输入

jQuery toggle input when checkbox is checked

提问by Mitchell Layzell

I'm trying to build something like wordpress options section. When you click the checkbox you can toggle the display of the corresponding <input type="text">field, I want to do this all in one function so I don't have tons of different functions so what would be the best way to toggle the corresponding input with the checkbox, I made a quick jsFiddle but when I use my checkbox it toggles all the inputs because I'm selecting all of them obviously, so what would be a better solution using like thisor something so toggle the corresponding field, thanks in advance, http://jsfiddle.net/MEC9n/

我正在尝试构建类似 wordpress 选项部分的内容。当您单击复选框时，您可以切换相应<input type="text">字段的显示，我想在一个功能中完成所有操作，因此我没有大量不同的功能，因此使用复选框切换相应输入的最佳方法是什么，我做了一个快速的 jsFiddle，但是当我使用我的复选框时，它会切换所有输入，因为我显然正在选择所有输入，所以使用类似this或其他东西的更好解决方案是切换相应的字段，提前致谢，http：/ /jsfiddle.net/MEC9n/

HTML

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

jQuery

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

回答by SomeShinyObject

This should help

这应该有帮助

Basic Solution

基本解决方案

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

Fiddle

小提琴

Maybe better?

可能更好？

If you really want to make it efficient, extend jQuery

如果你真的想让它高效，扩展 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

小提琴

回答by Jai

Check for the corresponding attribute name:

检查相应的属性name：

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

FIDDLE

小提琴

回答by Nishu Tayal

Use type and name together for mapping with respective textbox like this :

一起使用类型和名称与相应的文本框进行映射，如下所示：

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

Here is the working demo : http://jsfiddle.net/G5tN7/

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

I hope, it'll work for you.

我希望，它会为你工作。

回答by theshadowmonkey

I added values to the inputs and then used the value names to assign class names and use that to toggle the inputs. This is the JS

我向输入添加了值，然后使用值名称来分配类名称并使用它来切换输入。这是JS

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var value = $(this).val();
        $('.' + value).toggle();
    });
});

This is the HTML

这是 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>

And the fiddle http://jsfiddle.net/MEC9n/1/

和小提琴 http://jsfiddle.net/MEC9n/1/