4

チェックボックスがチェックされているかどうかに基づいて、領域を非表示および表示しようとしています。いくつかのオプションを試しましたが、領域が常に表示されているか、常に非表示になっています。

JavaScript :

$(document).ready(function () {
    var mgift = $('#chkbxMGift input[type=checkbox]');     
    MshowHide();    

    mgift.change(function () {
        MshowHide();
    });
});


function MshowHide() {
    var mgift = $('#chkbxMGift input[type=checkbox]');
    var shcompany = $('#shcompany');

    if (mgift.checked) {
        shcompany.show();
    } else {       
        shcompany.hide();        
    }
}

HTML :

<li>
    <div class="info">                 
        <asp:CheckBox ID="chkbxMGift" runat="server" Text="A matching gift will be made" ClientIDMode="Static"/>
    </div>
</li>

<li id="shcompany">    
    <div class="info">               
        <label for="txtCompanyName">Company Name</label>
        <asp:TextBox runat="server" ID="txtCompanyName" CssClass="narrow" />   
    </div>
    <div class="info">  
        <label for="txtCompanyPhone">Company Phone Number</label>
        <asp:TextBox runat="server" ID="txtCompanyPhone" CssClass="narrow"  />       
    </div>
</li>

どうすればこれを正しく機能させることができますか?

4

5 に答える 5

8

このコードを試してください

     $(document).ready(function () {
     $('#chkbxMGift').click(function () {
         var $this = $(this);
         if ($this.is(':checked')) {
             $('#shcompany').hide();
         } else {
             $('#shcompany').show();
         }
     });
 });

それがあなたの問題を解決することを願っています

于 2013-03-21T15:02:37.677 に答える
4

セレクターが間違っています。

var mgift = $('#chkbxMGift input[type=checkbox]');

inputこれは、親から子ノードを選択することを意味します#chkbxMGift。

これがあなたが必要とするセレクターだと思います：

var mgift = $('input#chkbxMGift[type=checkbox]');

そして、ここにあなたのコードのいくつかの改善があります：

$(document).ready(function () {
    var mgift = $('input#chkbxMGift[type=checkbox]'); 
    var shcompany = $('#shcompany');
    // check for default status (when checked, show the shcompany)
    if (mgift.attr('checked') !== undefined){
        shcompany.show();
    } else {
        shcompany.hide();
    }

    // then simply toggle the shcompany on every change
    mgift.change(function(){
        shcompany.toggle();
    });
});

jQueryのトグルは非常に便利で、バージョン1.0で追加されたので、それでうまくいくはずです。

これがjsFiddleの概念実証であり、最低限のものだけが含まれています。

http://jsfiddle.net/Y39Bu/1/

于 2013-03-21T14:49:48.100 に答える
1

これはこの答えから盗まれます：

http://jsfiddle.net/MH8e4/4/

$('.wpbook_hidden').css({
'display': 'none'
});

alert($(':checkbox:checked').attr('id'))
$(':checkbox').change(function() {
    var option = 'wpbook_option_' + $(this).attr('id');
    if ($('.' + option).css('display') == 'none') {
        $('.' + option).fadeIn();
    }
    else {
        $('.' + option).fadeOut();
    }
});

質問する前に、同様の質問を検索してください。これで問題が解決する場合は、元の作成者にクレジットを付与してください

于 2013-03-21T14:50:57.627 に答える
0

単純なCSSプロパティの変更でうまくいくのに、なぜJQueryを使用するのでしょうか。

divのクラスを変更するか、スタイルを変更するだけです。

隠し使用でもスペースを取りたい場合visibility:hidden（それぞれvisibility:visible）

非表示のときにスペースを取らないようにする場合は、cssを使用しますdisplay:none（それぞれdisplay:block）

于 2013-03-21T14:51:43.757 に答える
0

CSSを直接​​変更してみましたか？そのような

document.getElementById("shcompany").style.display="none";

また

document.getElementById("shcompany").style.visibility="hidden";

（または「見える」）

于 2013-03-21T14:49:24.940 に答える