Show/Hide on checkbox checked/unchecked

У меня есть 5 флажков. 4 из них должны показать/скрыть в зависимости от того, проверен ли 5-й/непроверенный. Я пытаюсь сделать это с помощью JQuery, но по какой-то причине я не совсем понимаю. Я нажимаю разделы кода, которые правильно проверяют свойство checked/unchecked, просто не получая правильный код show/hide. Я попробовал это, используя класс CSS для флажков, которые мне нужно переключить. Вот JQuery и .aspx кодShow/Hide on checkbox checked/unchecked

$(function() { 
     $('#<%=chkFrench.ClientID %>').unbind('click'); 

     $('#<%=chkFrench.ClientID %>').click(function() { 

      enable_cb(); 
      $(".EnhancedFrench").click(enable_cb); 
     }); 
    }); 

    function enable_cb() { 
     if (this.checked) { 
      alert("show"); 
      $('.EnhancedFrench').show(); 
     } else { 
     alert("hide"); 
      $('.EnhancedFrench').hide(); 
     } 
    } 

    <table> 
    <tr> 
    <td>Display Live (Fr):</td> 
    <td><asp:CheckBox runat="server" ID="chkFrench" CssClass="EnhancedFrench" />/td> 
    </tr> 
    <tr> 
    <td>French1</td> 
    <td><asp:CheckBox runat="server" ID="CheckBox1" CssClass="EnhancedFrench" /></td> 
    </tr> 
    <tr> 
    <td>French2</td> 
    <td><asp:CheckBox runat="server" ID="CheckBox2" CssClass="EnhancedFrench" /></td> 
    <tr> 
    <tr> 
    <td>French3</td> 
    <td><asp:CheckBox runat="server" ID="CheckBox3" CssClass="EnhancedFrench" /></td> 
    </tr> 
    <tr> 
    <td>French4</td> 
    <td><asp:CheckBox runat="server" ID="CheckBox4" CssClass="EnhancedFrench" /></td> 
    </tr> 
</table>

источник

2013-03-20 Mark Highfield

вы не передавая объект при вызове enable_cb() –

@MarkHighfield следует, что правило применяется на каждом щелкнули флажок и скрыть остальные или только 'CheckBox4 '? – 2013-03-20 16:19:40

в основном, если chkFrench проверен, остальные 4 должны быть видны, иначе остальные 4 не должны быть видны –

Я не проверить его, но он должен работать

$(function() { 
    $('#<%=chkFrench.ClientID %>').click(function(){ 
    if($(this).is(':checked')){ 
    $('.EnhancedFrench').show(); 

}else{ 
    $('.EnhancedFrench').hide(); 
} 
    });

});

источник

2013-03-20 16:06:45

Я провел быстрый образец. Для предоставленного кода вы можете попробовать использовать что-то вроде ниже.

Это должно скрыть все галочки, если последний установлен флажок

<script type="text/javascript"> 

    $(function() { 
     $('[id$="chkFrench"]').bind('change', function() { enable_cb(); }); 
    }); 

    function enable_cb() { 
     if ($('[id$="chkFrench"]').is(':checked')) { 
      $('span.EnhancedFrench:gt(0)').hide(); 
     } 
     else { 
      $('span.EnhancedFrench:gt(0)').show(); 
     } 
    } 

</script>

источник

2013-03-20 16:12:51 Dinesh

извините, я не очень хорошо сформулировал свой вопрос. Мне нужно, чтобы остальные, чтобы показать/скрыть с помощью chkFrench флажок установлен/не отмечен –

, я обновил ответ. Вы можете захотеть изменить вызовы вызова show и hide по мере необходимости – Dinesh

Я хотел бы предложить вам держать флажков в контейнер и использовать этот контейнер, чтобы показать, скрыть.

источник

2013-03-20 16:18:19

Вы также можете сделать это следующим образом:

$('tr:nth-child(5)').find('input[type=checkbox]').on('change',function(){ 
    $(this).parent('td').parent('tr').siblings().fadeToggle(); 
});

источник

2013-03-20 16:51:17 sanman

Show/Hide on checkbox checked/unchecked

ответ

Смежные вопросы