jQuery toggle input when checkbox is checked

Question

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 this or something so toggle the corresponding field, thanks in advance, 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();
        });
    });

You should incorporate your code into the question.

SomeShinyObject
– SomeShinyObject

2013-03-29 05:28:59 +00:00
Commented Mar 29, 2013 at 5:28 — SomeShinyObject
– SomeShinyObject, Commented Mar 29, 2013 at 5:28
jQuery: Toggle input text using checkbox

ram4nd
– ram4nd

2016-04-18 08:35:40 +00:00
Commented Apr 18, 2016 at 8:35 — ram4nd
– ram4nd, Commented Apr 18, 2016 at 8:35

SomeShinyObject · Accepted Answer · 2013-03-29 05:40:09Z

8

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

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

edited Mar 29, 2013 at 5:40

answered Mar 29, 2013 at 5:32

SomeShinyObject

7,8316 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitchell Layzell Over a year ago

Awesome thanks for your time! Probably the cleanest version thanks!

SomeShinyObject Over a year ago

@MitchellLayzell try the new one, I just updated. Now you don't even need to do the .click()

Jai · Accepted Answer · 2013-03-29 05:30:56Z

3

Check for the corresponding attribute name:

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

FIDDLE

answered Mar 29, 2013 at 5:30

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Mitchell Layzell Over a year ago

Wow, awesome thanks you so much, and thank you everyone for the quick replys!

Nishu Tayal · Accepted Answer · 2013-03-29 05:31:31Z

1

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/

I hope, it'll work for you.

answered Mar 29, 2013 at 5:31

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Comments

theshadowmonkey · Accepted Answer · 2013-03-29 05:32:11Z

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

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

This is the 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/

Collectives™ on Stack Overflow

jQuery toggle input when checkbox is checked

4 Answers 4

Basic Solution

Maybe better?

2 Comments

FIDDLE

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Basic Solution

Maybe better?

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related