jquery - JQuery:チェックボックス付きテキストボックスの表示/非表示

Question

以下のスクリプトに示すように、それぞれ 6 つのチェックボックスと 6 つのテキストボックスがあります。

http://jsfiddle.net/ramu_steve/H6dBW/1/

チェックボックス（ラジオボタン機能）をチェックすると、対応するテキストボックスが表示されます..しかし、他のチェックボックスをチェックするために移動すると、チェックボックスをオフにするまで、前のチェックボックスに表示されたテキストボックスは非表示になりません...よろしくお願いします

Answer 1

テキストボックスごとに個別のイベントを作成したようです。このコードは、1 つのイベントだけを使用して完全に実装できます。

$(function() {
    // Hide all Textboxes on DOM ready
    $('.typ').hide();

    //Create the click event for check box
    $('input[type="checkbox"]').on('click', function() {
        // Hide All Text Boxes
        $('.typ').hide();
        var isChecked = $(this).is(':checked');
        if(isChecked){  
            // Uncheck ALl the checkboxes
            $('.lettertyp').attr('checked', false);
            // Check curret checkbox
            $(this).attr('checked', true);
            // Find the Sibling of the TextBox and SHow it
            $(this).parent().parent().find('input[type=text]').show();
        }         
        else{
        }   
    });
});​

ここでフィドルをチェックしてください

Answer 2

もっとシンプルなコードはどうですか？

実際の例: http://jsbin.com/ewekit/1/edit

  <ul>
    <li>
      <label for="r1">
        <input type="checkbox" id="r1" name="r1" /> First Hotel Visit
      </label>
      <input type="text" id="t1" name="t1" />
    </li>
    <li>
      <label for="r2">
        <input type="checkbox" id="r2" name="r2" /> Repeat Hotel Visit
      </label>
      <input type="text" id="t2" name="t2" />
    </li>
    <li>
      <label for="r3">
        <input type="checkbox" id="r3" name="r3" /> Fish Bowl
      </label>
      <input type="text" id="t3" name="t3" />
    </li>
    <li>
      <label for="r4">
        <input type="checkbox" id="r4" name="r4" /> Large Party
      </label>
      <input type="text" id="t4" name="t4" />
    </li>
    <li>
      <label for="r5">
        <input type="checkbox" id="r5" name="r5" /> Generic
      </label>
      <input type="text" id="t5" name="t5" />
    </li>
    <li>
      <label for="r6">
        <input type="checkbox" id="r6" name="r6" /> Corp Marketing
      </label>
      <input type="text" id="t6" name="t6" />
    </li>
  </ul>

Javascript

$(function() {

  // hide all text inputs
  hideAllTextInputs();

  // radio click
  $("ul input[type='checkbox']").click(function() {

    // current <li>
    var li = $(this).closest("li");

    // show it's text
    li.find("input[type='text']").show();

    // hide all again
    hideAllTextInputs();
  });

});

function hideAllTextInputs() {
  // hide all text inputs
  $("ul input[type='checkbox']")
    .not(":checked")
    .closest("li")
    .find("input[type='text']")
    .hide();
}

Answer 3

ボックスがクリックされたときにすべきことは、すべてのテキストボックスを非表示にしてから、クリックされたボタンのテキストボックスを表示することです。この更新された jsFiddle を確認してください。私が行ったことはid='table'、テーブル要素に追加してから、クラスのコードの下にlettertypこのコードを追加することです:

$('#table input[type="text"]').hide();

これにより、すべてのテキストボックスが選択され、すべて非表示になります。次に、この後もコードが続き、選択されたボックスが表示されます。

Answer 4

http://jsfiddle.net/H6dBW/11/

//Select Promo Letter Type 
$(document).ready(function(){
    //CheckBoxes behaviour
    $(".lettertyp").click(function(){
        $(".lettertyp").attr('checked',false);
        $(this).attr('checked', true);
    });

    //Hide all textboxes   
    $('.typ').hide();

    //Hide FisrtHotelVist
    $('#lettertyp1').click(function(){
        $('.typ').hide();
        $('#typ1').show();
    }); 
    // Hide Repeat HotelVisit
    $('#lettertyp2').click(function(){
        $('.typ').hide();
        $('#typ2').show();
    }); 
    //Hide Fish bowl
    $('#lettertyp3').click(function(){
        $('.typ').hide();
        $('#typ3').show();
    }); 
    //Hide LargeParty
    $('#lettertyp4').click(function(){
        $('.typ').hide();
        $('#typ4').show();
    }); 
    //Hide Generic 
    $('#lettertyp5').click(function(){
        $('.typ').hide();
        $('#typ5').show();
    }); 
    //hide corpMarketing
    $('#lettertyp6').click(function(){
        $('.typ').hide();
        $('#typ6').show();
    }); 
});

OK balexandre、それからhttp://jsfiddle.net/H6dBW/18/

//Select Promo Letter Type 
$(document).ready(function(){
    //Hide all textboxes   
    $('.typ').hide();

    //CheckBoxes behaviour
    $(".lettertyp").click(function(){
        $(".lettertyp").attr('checked',false);
        $(this).attr('checked', true);
        $('.typ').hide();
        var id = $(this).attr('id');
        id = id.substr(id.length - 1);
        $('#typ' + id).show();
    });
});

Answer 5

多分これはあなたがそのすべてのコードでやろうとしていることだと思います.

$(function() {
    $('[id^="typ"]').hide();
    $(".lettertyp").on('change', function() {
        $(".lettertyp").not(this).prop('checked', false);
        $('[id^="typ"]').hide();
        $("#"+this.id.replace('letter', '')).toggle(this.checked);
    });
});

フィドル