Question

我有一个用于在复选框后隐藏/显示文本框的功能，它工作得非常好，直到有一天我将checkgroup更改为radiobutton组。我使用的功能就像这样

var U={
HideOptions: function() {
    $(".option").each(function() {
        if ($(this).closest("li").find(".extra").length) {
            if ($(this).find("input").is(":not(:checked)")) $(this).closest("li").find(".extra").hide();
            $(this).find("input").change(function() {
                $(this).closest("li").find(".extra").toggle().find(".checkgroup .extra").each(function() {
                    $(this).hide();
                    if ($(this).closest("li").find(".option input").is(":checked")) $(this).show();
                });
            });
        }
    });
},
ChangeToRadio: function(selector) {
    var $checkbox = $("input[name=" + selector + "]");
    $checkbox.click(function() {
        if ($(this).attr('checked')) {
            $checkbox.removeAttr('checked');
            $(this).attr('checked', true);
        }
    });
  }
}

我的html结构就像这样

<ul class="checkgroup>
    <li>
        <div class="option"> 
             <input id="abc" type="checkbox" value="0" name="chk">Yes
        </div>
        <div class="extra"><input id="abc1"  type="text" value="" > </div>
    </li>
    <li>
        <div class="option"> 
             <input id="edf" type="checkbox" value="1" name="chk"> No   
        </div>
        <div class="extra"> <input id="edf1"  type="text" value="" > </div>
    </li>
    ....
 </ul>

 <script type="javascript">
       U.HideOptions();
       U.ChangeToRadio("chk");
 </scripot>

通常，有几个

in，在我使用ChangeToRadio函数后，我发现HideOptions不能很好地工作。例如，如果您检查其他“选项”，则“额外”部分将不会隐藏。

有什么想法吗？

Answer 1

http://jsfiddle.net/f26Vs/

$('.option input:checkbox').on('click', function () {
  // you want to use .prop (it returns a boolean and is instant result) 
  //unlike .attr('checked') which has it's issue cross browser checking for true-ness

  var checked = $(this).prop('checked'), 
      _txtArea = $(this).closest('li').find('.extra');            

  if (checked) {
      _txtArea.show();
  }

  else { _txtArea.hide(); }
});

Answer 2

在if条件中，您说$(this).attr('checked')但.attr（）返回的字符串不是布尔值。将其更改为$(this).attr('checked') == "checked"，然后重试。

另外，如果可以的话，尝试发布一个小提琴，这样我们就可以一次调试多个步骤。谢谢:)）

如何在使用jQuery取消选中前面的复选框时隐藏文本框

2 个答案: