I have multiple inputs on the same page. Based on the selection and once the user press "Submit" I would like to show the relevant divs and hide the ones that are not related to the selection.
I could implement the structure I wanted but can not get the jQuery to display the different values.
Here is my code so far:
(function($) {
$('#quiz_submit').click(function() {
$('#quiz_submit').click(function() {
if ($('input[type="radio"]').attr("id") == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if ($('input[type="radio"]').attr("id") == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else($('input[type="radio"]').attr("id") == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
You need to add a button with id=quiz_submit in your HTML. You also have typos in the third and final condition.
(function($) {
$('#quiz_submit').click(function() {
let checkedId = $('input[type=radio][name=quiz-selector]:checked').attr('id')
if (checkedId == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if (checkedId == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else if(checkedId == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" value="submit"/>
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
If your problem is that your jQuery isn't working, it may have to do with the fact that there isn't any way for your code to get run.
First you have a click function inside a click function, take away one of those. Secondly there is no button to for that click handler to even run. I can't see anything particularly wrong with the code, as those were the things that stuck out to me.
Let me know if you are still getting an error after fixing that.
There's no element with the id quiz_submit in your html code.
i just created a code for you. that may be your answer.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<div class="a1" style="display:none">Answerof the questoon - One </div>
<div class="a2" style="display:none">Answerof the questoon - Two </div>
<div class="a3" style="display:none">Answerof the questoon - Three </div>
and jquery
$(document).ready(function(){
$('input[type="radio"]').change(function(){
if($(this).attr("id")=="option-one"){
$(".a1").show();
$(".a2").hide();
$(".a3").hide();
}
if($(this).attr("id")=="option-two"){
$(".a1").hide();
$(".a2").show();
$(".a3").hide();
}
if($(this).attr("id")=="option-three"){
$(".a1").hide();
$(".a2").hide();
$(".a3").show();
}
});
});
and here is working fiddle.
ClickHereForFiddle
Related
There is a solution here but I have a problem . when check box is checked and unchecked i wanted it to be empty but it results in
{
"category": []
}
but I wanted it to empty {}
const array = {};
$('[name^="pgggo-"]').on('click', function() {
const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
const id = attr.split('[')[0];
const checked = $(this).prop('checked');
array[taxonomy] = array[taxonomy] || [];
const index = array[taxonomy].indexOf(id);
index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
console.log(array);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-list-taxon">
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-56[]">
<div class="icon-box">
<div name="development">Development</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-14[]">
<div class="icon-box">
<div name="food">Food (category)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-home-sep-14[]">
<div class="icon-box">
<div name="food">Food (home)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-8[]">
<div class="icon-box">
<div name="medical">Medical</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-1[]">
<div class="icon-box">
<div name="uncategorized">Uncategorized</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-2[]">
<div class="icon-box">
<div name="wordpress">WordPress</div>
</div>
</label>
</li>
</div>
Please help
well there should be nothing wrong with that. But still if you want to remove the related property, you can use delete object.property to delete it when all the items have been unchecked as following
const array = {};
$('[name^="pgggo-"]').on('click', function() {
const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
const id = attr.split('[')[0];
const checked = $(this).prop('checked');
array[taxonomy] = array[taxonomy] || [];
const index = array[taxonomy].indexOf(id);
index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
if(array[taxonomy].length == 0){
delete array[taxonomy];
}
console.log(array)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-list-taxon">
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-56[]">
<div class="icon-box">
<div name="development">Development</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-14[]">
<div class="icon-box">
<div name="food">Food (category)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-home-sep-14[]">
<div class="icon-box">
<div name="food">Food (home)</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-8[]">
<div class="icon-box">
<div name="medical">Medical</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-1[]">
<div class="icon-box">
<div name="uncategorized">Uncategorized</div>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="pgggo-category-sep-2[]">
<div class="icon-box">
<div name="wordpress">WordPress</div>
</div>
</label>
</li>
</div>
I have some tabs with radio buttons in them and want to check when the last option is clicked (by that I mean any radio button in the last tab, not the last radio button).
This is my html:
<div id="smartwizard" class="sw-main sw-theme-default">
<ul class="nav nav-tabs step-anchor">
<li class="optietabs nav-item done">
<a href="#step-0" class="nav-link">Lijmlaag
<button class="infotooltip" data-tooltip="lijmlaag is gewoon een dikke laag lijm">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-0" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Wit-Lijmlaag" name="Lijmlaag" value="Wit(prijsberekening)($m2*4);">
<label for="Wit-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Wit">
<p><strong>Wit</strong></p>
</div>
</label>
<input type="radio" id="Grijs-Lijmlaag" name="Lijmlaag" value="Grijs(prijsberekening)($stuksprijs+15);">
<label for="Grijs-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Grijs">
<p><strong>Grijs</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item done">
<a href="#step-1" class="nav-link">Laminaat
<button class="infotooltip" data-tooltip="Test test test test ">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-1" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Anti-slip laminaat-Laminaat" name="Laminaat" value="Anti-slip laminaat(prijsberekening)($o*5);">
<label for="Anti-slip laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Anti-slip laminaat">
<p><strong>Anti-slip laminaat</strong></p>
</div>
</label>
<input type="radio" id="Glans laminaat-Laminaat" name="Laminaat" value="Glans laminaat(prijsberekening)($m2*4);">
<label for="Glans laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Glans laminaat">
<p><strong>Glans laminaat</strong></p>
</div>
</label>
<input type="radio" id="Mat laminaat-Laminaat" name="Laminaat" value="Mat laminaat(prijsberekening)($m2*4);">
<label for="Mat laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Mat laminaat">
<p><strong>Mat laminaat</strong></p>
</div>
</label>
<input type="radio" id="Geen-Laminaat" name="Laminaat" value="Geen">
<label for="Geen-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Geen">
<p><strong>Geen</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item active">
Afwerking
<div id="step-2" class="">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Contoursnijden-Afwerking" name="Afwerking" value="Contoursnijden(prijsberekening)($m2*30);">
<label for="Contoursnijden-Afwerking">
<div class="afwerking-tab">
<div class="ribbon ribbon-top-right">
<span>Meest gekozen</span>
</div>
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Contoursnijden">
<p><strong>Contoursnijden</strong></p>
</div>
</label>
<input type="radio" id="Schoonsnijden-Afwerking" name="Afwerking" value="Schoonsnijden">
<label for="Schoonsnijden-Afwerking">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Schoonsnijden">
<p><strong>Schoonsnijden</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
</ul>
</div>
This is my jquery function:
$("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
var form_data = $("#formsid form").serialize();
$('#formaataantaltab').removeClass('formaataantal-done');
$('#formaataantaltab').addClass('formaataantal');
$.ajax({
type:'post',
url:"catalog/calcdiv.php",
data:({form_data: form_data}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#ajaxresult" ).empty().append( content );
$('#prijsonder').empty().append($('#prijs').html());
// indicate the ajax has been done, release the next step
$("#smartwizard").smartWizard("next");
}
});
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
$(".optietabs").each(function(){
$(this).on("click", function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(this).offset().top
}, 0);
})
});
});
Where this part is logging when a last option is clicked in the console:
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
The problem is when I click one radio button, I see the console logging last option clicked multiple times, in this case 3, instead of just one time each radio button click.
Why is that? What am I doing wrong?
You added code $($laatsteopties).on("change", function() {... (1) in block $("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) { (2), so code (1) executes three times for each radio button. You need to move code
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
out of code block (2).
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 would like to click each first child of class="cf" and should be in order, first cf first because the other radio is disabled unless you click the first one. The cf length is undetermined (in this example I put 3) so I need to first get the length of the child of ol > li and loop the clicking there.
Here is the structure of the HTML
<div id="group-attr-selects" class="grouped-select">
<ol>
<li class="opt-label">Dimensions</li>
<div id="conf-container-1549" class="cf">
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1461" type="radio" value="1461">
<label class="optdiv-label" for="conf-radio-1461">3" H x 3" W</label>
</div>
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1421" type="radio" value="1421">
<label class="optdiv-label" for="conf-radio-1421">4" H x 4" W</label>
</div>
</div>
<div id="err-attribute1549" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Color</li>
<div id="conf-container-1379" class="cf">
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12791" type="radio" value="12791">
<label class="optdiv-label" for="conf-radio-12791">Black on Almond</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12796" type="radio" value="12796">
<label class="optdiv-label" for="conf-radio-12796">Black on Brushed Aluminum</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12798" type="radio" value="12798">
<label class="optdiv-label" for="conf-radio-12798">Black on Brushed Brass</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12794" type="radio" value="12794">
<label class="optdiv-label" for="conf-radio-12794">Black on Brushed Gold</label>
</div>
</div>
<div id="err-attribute1379" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Mounting Type</li>
<div id="conf-container-2605" class="cf">
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-76" type="radio" value="76">
<label class="optdiv-label" for="conf-radio-76">Adhesive</label>
</div>
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-762" type="radio" value="762">
<label class="optdiv-label" for="conf-radio-762">No Mounting</label>
</div>
</div>
<div id="err-attribute2605" style="color: red; margin-bottom: 5px"></div>
</ol>
Got the solution from this answer
I just made a few adjustments.
.findAllByCssSelector('#group-attr-selects > ol > div.cf')
.then(function (elementArray) {
return Promise.all(elementArray.map(function (element) {
return element.getVisibleText()
.then(function (children) {
for(var i=0; i < children.length; i++){
return element.findByCssSelector('.optdiv > input')
.then(function (inp) {
return inp.click();
});
}
});
}));
})
This should work:
jQuery:
$('.cf').each(function(i, item){$(item).find('input[type="radio"]')[0].click()})
JS:
Array.from(document.getElementsByClassName('cf')).forEach(function(item){item.querySelector('input[type="radio"]').checked = true})
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"/>