0

チェックボックスの直後にテキストボックスを非表示/表示するために使用される機能がありますが、ある日チェックグループをラジオボタングループに変更するまで非常にうまく機能します。使ってる機能はこんな感じ

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 がうまく機能しないことがわかりました。例えば、他の「オプション」にチェックを入れると「おまけ」の部分は非表示になりません。

    何か案が？

    • 4

    2 に答える 2

    0

    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>

    于 2012-07-27T17:41:30.367 に答える
    0

    あなたのif条件であなたは言います$(this).attr('checked')が、.attr()はブール値ではなく文字列を返します。これを に変更して$(this).attr('checked') == "checked"、もう一度お試しください。

    また、可能であれば、一度に複数のステップでデバッグできるように、フィドルを投稿してみてください。ありがとう ：）

    于 2012-07-27T17:43:18.267 に答える