Question

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

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

Answer 1

如何更简单的代码？

  <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

您应该执行的操作是单击一个框，隐藏所有文本框，然后显示单击按钮的文本框。 Check out this updated 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);
    });
});

FIDDLE

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

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

JQuery：使用复选框显示/隐藏文本框

5 个答案: