How can I show/hide <li> on check radio using JavaScript or jQuery

Question

How can I show/hide li classes on check/unchecked radio buttons?

I'd done it through code behind, but I want it through JavaScript or jQuery, if I remove runat="server" from input radio it works fine but I have some forms in li classes so when I press submit/save its saved and return to 1st tab. If I remove checked="checked" , on first loading doesn't show any tab.

<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

Just to understand you well, You want to show or hide a list item based on the checkbox selected.

First Hide them all using

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

then add a 'on change' event handler to the checkboxes. for that add a common class to all the radio buttons, lets say 'radioButton' then bind the handler like this:

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

and then update your html to have the data attribute and the class name

<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>

here is a working jsfiddle here .

Answer 2

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