如何使用 <li> JavaScript 或 jQuery 在检查收音机上显示/隐藏

Question

如何在选中/未选中单选按钮上显示/隐藏li类？

我已经通过代码隐藏完成了，但我希望通过JavaScript或jQuery完成，如果我从输入单选中删除runat="server"，它可以正常工作，但我在li类中有一些表单，所以当我按下提交/保存时，它已保存并返回到第一个选项卡。如果我删除checked="checked"，第一次加载时不会显示任何选项卡。

<div class="pcss3t" >
<input type="radio" name="pcss3t" id="tab1" checked runat="server" class="tab-content-1"/>
<label for="tab1">Property</label>                  
<input type="radio" name="pcss3t" id="tab2" runat="server" class="tab-content-2" />
<label for="tab2">Allottee</label>                    
<input type="radio" name="pcss3t" id="tab3" runat="server" class="tab-content-3" />
<label for="tab3">Transferee</label>
<ul>
<li class="tab-content tab-content-1" id="tabcontent1" runat="server">
<table></table>
</li>
<li class="tab-content tab-content-2" id="tabcontent2" runat="server">
    <table></table>
</li>
<li class="tab-content tab-content-3" id="tabcontent3" runat="server">
    <table></table>
</li>
</ul>
</div>

Answer 1

为了更好地理解您，您需要根据选中的复选框显示或隐藏列表项。

首先使用将它们全部隐藏

$('.tab-content').hide();

然后在复选框中添加"on change"事件处理程序。为此，向所有单选按钮添加一个公共类，比如"radioButton"，然后绑定处理程序像这样：

$(".radioButton").change(function() {
       $('.tab-content').hide()
       $('#'+this.dataset.show).show()
})

然后更新你的html，使其具有数据属性和类名

<div class="pcss3t" >
    <input type="radio" name="pcss3t" id="tab1" data-show="tabcontent1" class="radioButton"/>
    <label for="tab1">Property</label>                  
    <input type="radio" name="pcss3t" id="tab2" data-show="tabcontent2" class="radioButton" />
    <label for="tab2" >Allottee</label>                    
    <input type="radio" name="pcss3t" id="tab3" data-show="tabcontent3" class="radioButton" />
    <label for="tab3">Transferee</label>
    <ul>
        <li class="tab-content tab-content-1" id="tabcontent1" runat="server">
        <table>1</table>
        </li>
        <li class="tab-content tab-content-2" id="tabcontent2" runat="server">
            <table>2</table>
        </li>
        <li class="tab-content tab-content-3" id="tabcontent3" runat="server">
            <table>3</table>
        </li>
    </ul>
</div>

这里有一个正在工作的小提琴。

Answer 2

$("#tab1").on("click", function() {
    $(".tab-content-1").toggle();
});