Most of the answer here what to go from an object to a list. I need to go the other way. Here is the HTML. This is only a subset of a much larger list - but it is always the same structure and will only ever be three levels deep.
<li class="group">
<input class="group" id="Agriculture" type="checkbox" name="Agriculture">
<label for="Agriculture">Agriculture</label>
<ul class="categories">
<li class="category">
<input class="input_category" id="Apiculture" type="checkbox" name="Apiculture">
<label for="Apiculture"">Apiculture</label>
</li>
<li class="category">
<input class="input_category" id="Barns & buildings" type="checkbox" name="Barns & buildings">
<label for="Barns & buildings"="">Barns & buildings</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Operations" type="checkbox" name="Operations">
<label for="Operations"">Operations</label>
</li>
<li class="subcategory">
<input class="subCategory" id="Storage" type="checkbox" name="Storage">
<label for="Storage"">Storage</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Crop handling" type="checkbox" name="Crop handling">
<label for="Crop" handling"="">Crop handling</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Harvest equipment" type="checkbox" name="Harvest equipment">
<label for="Harvest" equipment"="">Harvest equipment</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Dairying" type="checkbox" name="Dairying">
<label for="Dairying"">Dairying</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Test equipment" type="checkbox" name="Test equipment">
<label for="Test" equipment"="">Test equipment</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Land improvement" type="checkbox" name="Land improvement">
<label for="Land" improvement"="">Land improvement</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Miscellaneous" type="checkbox" name="Miscellaneous">
<label for="Miscellaneous"">Miscellaneous</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Poultry equipment" type="checkbox" name="Poultry equipment">
<label for="Poultry" equipment"="">Poultry equipment</label>
</li>
</ul>
</li>
I have tried many ideas - recursive functions, foreach loops, etc...
This answer got close (How to save HTML ul-li structure into javascript object) - but they resulting array is (in my opinion only) messy, and it doesn't quite do what I need.
From this new object I need to send it to a php file to create filter queries in SOLR. As all these items in the html above are associated with each other (it's a lexicon) I need to get it into an clean(ish) object so I can pass it to php which will create the queries depending on what is checked.
What I need from the object is the associations for each "branch" - this will allow me to create SOLR filter queries using booleans.
At the end of the whole process I want something like the following....
Agriculture => Apiculture
Agriculture => Barns & buildings
Agriculture => Barns & buildings => Operations
Agriculture => Barns & buildings => Storage
Agriculture => Crop Handling
Agriculture => Crop Handling => Harvest Equipment
Agriculture => Dairying
Agriculture => Dairying => Test Equipment
Agriculture => Land Management
Agriculture => Land Management => Miscellaneous
Agriculture => Poultry equipment
This way in the PHP I can create the queries with relative ease. Each these pseudo lines can be made into individual filter queries.
Any ideas welcome - even new ways to do what is needed.
Thanks.
Related
I have a problem with my category filter.
I've created a dropdown selection with different categorys and a normal list with informations like title and category. If a user selects a option at example "IT" it shows all list items with the word "IT". Now the problem is that it filters for all words with "IT" in it but I want to search only for the tag "categoryname".
Here is my code:
$(document).ready(function() {
$(".categoryselection").on("change", function() {
var value = $(this).val().toLowerCase();
$("#myList li.list-choose span.kategorie, #myList li.list-choose").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
$("span.categoryname").css({
display: 'block',
color: '#e60'
})
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="categoryselection">
<option selected="selected" disabled="disabled">Category</option>
<option value="All categorys">All categorys</option>
<option value="Economy">Economy</option>
<option value="Politics">Politics</option>
<option value="IT">IT</option>
</select>
<ul id="myList">
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 1: test</label>
<div class="subtitle">
<span class="categoryname" style="display: none">Economy<span style="display: none">All categorys</span></span>
</div>
</li>
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 2: test 2</label>
<div class="subtitle">
<span class="categoryname" style="display: none">Politics<span style="display: none">All categorys</span></span>
</div>
</li>
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 2: test 3</label>
<div class="subtitle">
<span class="categoryname" style="display: none">Economy<span style="display: none">All categorys</span></span>
</div>
</li>
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 2: IT</label>
<div class="subtitle">
<span class="categoryname" style="display: none">No category<span style="display: none">All categorys</span></span>
</div>
</li>
</ul>
You can see that it also searches for the name of the list items (If you choose the category "IT" it also displays "politics" because IT is inside this word - but this is not what I want :D). But I want that it only looks for the span tag in the class "categoryname".
There were several problems with your code:
when faced to this kind of problem, you should learn how to debug, for example with console.log, to be sure your selections get what you want (remove comments to see them in action)
You were using filter here for no reason. Filter returns an array that filters your base array depending if the argument function returns true or false. Use rather jQuery's each or plain JS map
You can use find to select elements inside your first selection
you get several categories tags in a string, if you want to isolate them, you have to use a separator (I choosed "|"). Then you can use split to transform the string into an array, and indexOf to check for the match:
Good luck!
$(document).ready(function() {
$(".categoryselection").on("change", function() {
var value = $(this).val().toLowerCase();
$("#myList li.list-choose span.kategorie, #myList li.list-choose").each(function() {
//console.log($(this)); //will show the current element
//console.log($(this).text()); //will show the current element's text
$(this).toggle($(this).find(".categoryname").text().toLowerCase().split("|").indexOf(value) > -1);
$("span.categoryname").css({
display: 'block',
color: '#e60'
})
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="categoryselection">
<option selected="selected" disabled="disabled">Category</option>
<option value="All categorys">All categorys</option>
<option value="Economy">Economy</option>
<option value="Politics">Politics</option>
<option value="IT">IT</option>
</select>
<ul id="myList">
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 1: test</label>
<div class="subtitle">
<span class="categoryname" style="display: none">Economy<span style="display: none">|All categorys</span></span>
</div>
</li>
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 2: test 2</label>
<div class="subtitle">
<span class="categoryname" style="display: none">Politics<span style="display: none">|All categorys</span></span>
</div>
</li>
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 2: test 3</label>
<div class="subtitle">
<span class="categoryname" style="display: none">Economy<span style="display: none">|All categorys</span></span>
</div>
</li>
<li class="list-choose">
<input class="input-choose" type="checkbox" id="[ID]" />
<label class="label-choose" for="[ID]">Magazine 2: IT</label>
<div class="subtitle">
<span class="categoryname" style="display: none">No category<span style="display: none">|All categorys</span></span>
</div>
</li>
</ul>
In you case, you are using indexOf to find the first occurence, and not an exact matching.
As shown on this post, you've to use strict comparison.
In your script, replace :
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
By
if (value === $(this).toggle($(this).text().toLowerCase())
I have a buch of checkbox in different containers like below:
$("input:checkbox").click(function() {
var url = "http://example.com/results?&"
var flag = false;
var $box = $(this);
var $facet = $box.val();
var $name = $box.attr("name");
var group = "input:checkbox['" + $facet + $name + "']:checked";
console.log(group);
$("#pruebita").not(this).attr("checked", false);
$(group).each(function() {
if (!flag) {
url = url + $(this).val() + $(this).attr('name');
flag = true; // To trace if first query string added
} else {
url = url + "&" + $(this).val() + $(this).attr('name');
}
});
console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle " id="gender">
gender
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">
ocassion
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I want that the checkboxes don't uncheck the previous option when checking another section of checkboxes.
The complete code is also at jsfiddle
In your code you have
$("#pruebita").not(this).attr("checked",false);
Which essentially is unchecking all the checkboxes except the clicked one. Removing this line of code will make it work fine.
See updated fiddle
You don't need any javascript at all for this problem; you just need to use appropriate form elements and set their attributes correctly.
Radio buttons are for when only one of a group of options should be selectable; checkboxes are for when more than one should be selectable. They aren't interchangeable. Do not use javascript to disguise radio button functionality as checkbox elements; that's bad usability, as it gives the user incorrect expectations about how the form will work.
Part of the problem is that you've confused the purpose of the "name" and "value" attributes. The "name" attribute is for defining which group the radio buttons belong to; all radio buttons with the same name will be in the same group. The "value" attribute contains the value that will be submitted as part of the form if that option is selected. You had them backwards:
<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>
With the above code, all the boxes have a unique 'name', so none of them would be grouped; meanwhile the user's selection wouldn't have any effect, since they both have the same value. Instead, that should be this:
<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>
That HTML will cause the form field "gender" to contain the value "women" or "men", depending on the user's selection. Here's the full corrected example:
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle" id="gender">gender</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">ocassion</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I can hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my question.
This is the code that I entered into the javascript window belonging to the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
$(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";
});
I was wondering how the same could be achieved with jQuery?
I have successfully installed jQuery thanks to this handy guide by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
in the source view of the header. Additionally, I added var jq = jQuery.noConflict(); at the top of the javascript window belonging to this question.
By inspecting the source code further I found that the ID of the question is QID2. Based on this answer I therefore tried
$("#QID2 .ChoiceStructure ul li:eq(0)").hide();
but without success.
Please note that ideally I would not want to specify the question ID manually, but instead refer to the question as I have with regular JavaScript.
Edit: the html for the qualtrics question is:
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li>
<li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
You can use prototypejs (which Qualtrics already uses) to do it quite simply:
Qualtrics.SurveyEngine.addOnload(function()
{
$(this.questionId).down('li').hide();
});
Maybe some of rules that you added in JQuery request ( i mean inside the brackets $(here)) is not valid and JQuery returns wrong link to node element (or returns "undefined"). I guesting that a problem in last construction with .class ul li (because u added class to ul).
So you need to use
$("#QID2 ul li:eq(0)")
or
$("#QID2 ul.ChoiceStructure li:eq(0)"
About refer to the question - you can use variables as in normal JS and add value in JQuery using simple concatenation like
$("#QID"+variableWithQuestionNumber+" li:eq(0)")
(function(){
var counter = 0;
$(".myButton").click(function(e){
if (counter===0){
$("#QID2 ul li:eq(0)").hide();
counter++;
}else{
$("#QID2 ul li:eq(0)").show();
counter--;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div>
<div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg">
<input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection reg">
<input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span>
</label>
</span>
<div class="clear"></div>
</li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
<input type="button" class="myButton" value="Push me"/>
I am new to web development. Now I am in a mess.
I want to show 4 random questions in a label. Say
Largest River in the world?
Largest ocean?
Largest Forest?
Largest Waterfall?
At the same time, the values [questions] should take into a hidden input box [for POST].
How to create it using Java Script?
My HTML Code is as follows
<ul class="sf-content"> <!-- form step two -->
<li>
<div class="sf_columns column_3">
<label id="qtext"> <strong>Question1?</strong></label>
</div>
</li>
<li>
<div class="sf_columns column_3">
<input type="text" placeholder="Answer" name="answer" data-required="true" >
<input id="qhtext" type="text" name="question" value="" readonly />
</div>
</li>
</ul>
I got the answer
<ul class="sf-content"> <!-- form step two -->
<li>
<div class="sf_columns column_3">
<label id="qtext"></label>
</div>
</li>
<li>
<div class="sf_columns column_3">
<input id="answer" type="text" placeholder="Answer" name="answer" data-required="true" >
<input id="qhtext" type="text" name="question" value="" readonly />
</div>
</li>
</ul>
The js is as follows
var questions = ["Largest River in the world?","Largest ocean?","Largest Forest?","Largest Waterfall?" ];
$(document).ready(function(){
getRandomQuestion();
});
function getRandomQuestion(){
//Math.floor(Math.random()*(max-min+1)+min); - random number between min and max
var randomQuestion = questions[ Math.floor(Math.random()*4)];
$("#qtext").text(randomQuestion);
$("#qhtext").val(randomQuestion);
}
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>
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.
$("#tab1").on("click", function() {
$(".tab-content-1").toggle();
});