jquery - JQuery：显示/隐藏带有复选框的文本框

Question

我分别有 6 个复选框和 6 个文本框，如下面的脚本所示，

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

当我检查一个复选框（单选按钮功能）时，会显示相应的文本框..但是当我移动到检查其他复选框时，在我们取消选中复选框之前，为前一个复选框显示的文本框不会被隐藏......提前致谢

Answer 1

更简单的代码怎么样？

现场示例：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 2

看起来您为每个文本框编写了一个单独的事件。只需使用单个事件即可完全实现此代码..

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

在这里检查FIDDLE

Answer 3

你应该做的是当一个框被点击时，隐藏所有的文本框，然后显示被点击按钮的文本框。查看这个更新的 jsFiddle。我所做的是添加id='table'到您的表格元素中，然后在您的代码下lettertyp添加此代码的类：

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

这将选择所有文本框并将它们全部隐藏。然后您的代码在此之后继续并显示被选中的框。

Answer 4

我想也许这就是你试图用所有这些代码做的事情，不太确定，因为我只完成了一半？

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

小提琴

Answer 5

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

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