Как я могу переключать видимость панели с помощью CheckBox?

Question

У меня есть <asp:CheckBox>, и мне нужно применить к нему вызов JavaScript. Функция JavaScript должна установить значение <asp:Panel> на true, если установлен флажок CheckBox. Видимость панели должна быть ложной, если CheckBox не отмечен.

Я не смог получить доступ к функции JavaScript, используя <asp:CheckBox> с нормальным input:type = checkbox, который работал. Но мне нужно, чтобы это было <asp:CheckBox>!

Answer 1

Если я вас правильно понимаю, я бы лично использовал jquery, тогда вы можете сделать что-то вроде этого

    $("#yourCheckBoxId").change(function(){
       if($(this).attr('checked')){
          $(".yourDivClass").show();
       }
    });

Answer 2

Предполагая, что у вашего CheckBox есть атрибут runat="server", вам нужно сделать что-то вроде:

$("<%= MyCheckBox.ClientID %>").change(function () {
    $("<%= MyPanel.ClientID %>").toggle();
});

Приведенный выше код предполагает, что ваши CheckBox и Panel всегда будут одинаковымигосударство.То есть checked CheckBox равно видимому Panel.Если вам нужно изменить этот код (изменить условия, при которых Panel отображается и т. Д.) И хотите сослаться на текущее состояние checked вашего CheckBox, просто сделайте это внутри вашей функции change():

var checked = $(this).prop("checked");

Примечание: Для будущей совместимости важно использовать функцию prop() вместо attr().Разница здесь незначительна, но attr() вернет состояние CheckBox , когда он был впервые загружен на страницу .prop() вернет текущее состояние CheckBox.

Answer 3

function toggle_panel(chkbox)
{
    var panel=document.getElementById('<%=panle1.ClientID %>');
    chkbox.checked ? panel.style.display='inline':panel.style.display='none';
}  

Просто вызовите функцию javascript, чтобы получить доступ к элементу управления asp.net из javascript, его следует сделать невидимым с помощью атрибута style, поскольку javascript вернет undefined, если используется Visible = "false".

<asp:CheckBox ID="chkboxPanel" runat="server" onclick="toggle_panel(this);" Text="Show" />
    <br />
    <br />
    <asp:Panel ID="panle1" runat="server" Style="display: none">
        Iam Text Inside the Panel
    </asp:Panel>