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

Question

我有一个用于在复选框之后隐藏/显示文本框的功能，它工作得很好，直到有一天我将检查组更改为单选按钮组。我使用的功能是这样的

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>

通常，有几个

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

任何想法？

Answer 1

在您的 if 条件下，您说$(this).attr('checked')但是 .attr() 返回一个字符串而不是布尔值。将其更改为$(this).attr('checked') == "checked"并重试。

另外，如果可以的话，请尝试发布一个小提琴，以便我们一次调试多个步骤。谢谢 ：）

Answer 2

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

​</p>