3

wordpressオプションセクションのようなものを構築しようとしています。チェックボックスをクリックすると、対応する<input type="text">フィールドの表示を切り替えることができます。これをすべて1つの機能で実行したいので、さまざまな機能がたくさんないので、対応する入力をチェックボックスで切り替える最良の方法は何ですか?簡単なjsFiddleを作成しましたが、チェックボックスを使用すると、明らかにすべての入力を選択しているため、すべての入力が切り替えられます.likethisまたは何かを使用して対応するフィールドを切り替えてください. /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();
        });
    });
4

4 に答える 4

8

これは役立つはずです

基本的な解決策

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

フィドル

于 2013-03-29T05:32:12.923 に答える
2

対応する属性を確認しますname。

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

フィドル

于 2013-03-29T05:30:56.093 に答える
1

タイプと名前を一緒に使用して、次のようにそれぞれのテキスト ボックスにマッピングします。

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

これが実際のデモです: http://jsfiddle.net/G5tN7/

うまくいくことを願っています。

于 2013-03-29T05:31:31.853 に答える
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>

そしてフィドル http://jsfiddle.net/MEC9n/1/

于 2013-03-29T05:32:11.317 に答える