Develop Reference

Html into search text with jquery

I return the elements of the list with a for loop.
I left one of the elements in this list below as an example.
My goal is to reach the label in this html and read the text value. How can I do that?
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>

Using vanilla JS:
You can find the element with querySelector() and access innerText or textContent property.
var labelText = document.querySelector('label.dd-option-text').textContent;
console.log(labelText);
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>
Using jQuery: Access the text() on the returned object:
var labelText = $('label.dd-option-text').text();
console.log(labelText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>

Jquery
let yourListElement = $("ul li")
console.log(yourListElement.find("label").text())
Vanilla Javascript
yourListElement.querySelector(".dd-option-text").textContent

The toggle in the script isn't working for me

I'm using this code that I found online, but it's not working completely the way I want it to.
Basically I am wanting check boxes to hide divs based on the users selection.
I am building an allergens advice page for a restaurant. When a guest selects the allergens they have I want it to hide the dishes that they cannot have.
The above code works perfectly if the guest has one allergen. It hides the div. If they select more than one then the box will reappear.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.
</div>
<ul>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
</ul>
I'm guessing it's doing it because the code is toggling, but I don't know of any other code to prevent that.
Your help would be greatly appreciated.

I just copied further code from the link
What is happening here is just checkbox from ks-cboxtags class will be affected so any other checkbox will not have this functionality.
when you click on this it will displays div and if its selected div will be hide.
check below snippet for more details.
$(document).ready(function() {
$(".test").click("test"); //ignore this
$(".ks-cboxtags input").click(function() {
$("."+$(this).val()).show();
$(".ks-cboxtags input:checked").each(function() {
$("."+$(this).val()).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main class="inline-block-center">
<div class="selectt Gluten" style="display: block;">
<strong style="font-size: 18px;">MEXICAN POPPADOMS</strong><br> Crispy blue corn tortillas with roasted tomato salsa, habanero & pepper salsa, green tomatillo & jalapeño salsa.</div>
<div class="selectt Eggs Gluten" style="display: block;">
<strong>PAO DE QUEIJO</strong><br> Traditional Brazilian cheese dough balls served with chipotle butter.</div>
<div class="selectt Gluten" style="display: block;">
<strong>PERUVIAN BOTIJA OLIVES</strong><br> In a herby marinade.</div>
<div class="selectt Milk Gluten" style="display: block;">
<strong>TEQUENOS</strong> <br> A popular Venezuelan street food; cheese filled fried bread sticks served with chipotle butter.</div>
</main>
<ul class="ks-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Gluten">
<label for="checkboxOne"> Gulten</label>
</li>
<li>
<input type="checkbox" id="checkboxTwo" value="Crustaceans">
<label for="checkboxTwo"> Crustaceans</label>
</li>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkboxFour" value="Fish">
<label for="checkboxFour"> Fish</label>
</li>
<li>
<input type="checkbox" id="checkboxFive" value="Peanuts">
<label for="checkboxFive"> Peanuts</label>
</li>
<li>
<input type="checkbox" id="checkboxSix" value="Soy Beans">
<label for="checkboxSix"> Soy Beans</label>
</li>
<li>
<input type="checkbox" id="checkboxSeven" value="Milk">
<label for="checkboxSeven"> Milk</label>
</li>
<li>
<input type="checkbox" id="checkboxEight" value="Tree Nuts">
<label for="checkboxEight"> Tree Nuts</label>
</li>
<li>
<input type="checkbox" id="checkboxNine" value="Celery">
<label for="checkboxNine"> Celery</label>
</li>
<li>
<input type="checkbox" id="checkboxTen" value="Mustard">
<label for="checkboxTen"> Mustard</label>
</li>
<li>
<input type="checkbox" id="checkboxEleven" value="Seasame">
<label for="checkboxEleven"> Seasame</label>
</li>
<li>
<input type="checkbox" id="checkboxTweleve" value="Sulphur">
<label for="checkboxTweleve"> Sulphur</label>
</li>
<li>
<input type="checkbox" id="checkboxThirteen" value="Lupin">
<label for="checkboxThirteen"> Lupin</label>
</li>
</ul>

Your code throws unexpected end of input, you are missing closing parentheses for $(document).ready():
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
In the case of multiple checkboxes that refer to the same product that should stay hidden:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).val();
if($(this).is(':checked')){
$("." + inputValue).hide();
}else{
$("." + inputValue).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkbox4" value="Gluten">
<label for="checkbox4"> Gluten</label>
</li>

I've rewritten the code without jQuery, as it doesn't seem to need it...
Here is the pen: https://codepen.io/paulmartin91/pen/ExjgQBJ?editors=1011
JS
//object containing each allergen. Add them to this object when adding them to the list - always set to false as default
let choices = {
Eggs: false,
Gluten: false
}
let clickedBox = (input) => {
//mark the selected allergen as checked
choices[input.value] = input.checked
//returns an array of classes for each element with the selected allergen
let selected = document.getElementsByClassName(input.value)
//iterates though array of elements with selected allergen
for (let i = 0; i < selected.length; i++) {
//creates an array of classes for each element
var classList = selected[i].className.split(' ')
var counter = 0
classList.forEach(x=>{
//if the element contains a class that is checked, hide it
if (choices[x]) {selected[i].style.display = 'none'} else{
//count the number of classes that aren't checked
counter++
//if the element has no classes that are checked, show it
if (counter == classList.length) {selected[i].style.display = 'block'}
};
})
}
};
HTML
<div class=" Eggs Gluten">
<strong>Eggs Gluten</strong>
</div>
<div class="Eggs ">
<strong>Eggs</strong>
</div>
<div class="Gluten ">
<strong>Gluten</strong>
</div>
<li>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxOne"
value="Eggs">
<label for="checkboxOne"> Eggs</label>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxTwo"
value="Gluten">
<label for="checkboxTwo"> Gluten</label>
</li>
It now iterates through all the elements that match the class and hide/show them based on the condition of the checked box.
Hope this helps!
Edit: fixed code, should work now!

json record from javascript, espace empty record

I wish to record input into my form in JSON array, but I don't know why it records empty items with "{}" and that's bug my view form when I want to use it after.
My javascript code :
function update_CF_Data(CF_SortablesForm){
var mySelector = $("#cf-sortables-form");
var data_array = new Array();
$("#cf-sortables-form :input").not("#cf-sortables-form :input[class=optionprix]").each(function(){
var optionPrix = $(this).siblings("input.optionprix").val();
var item = {};
item['name'] = $(this).attr('name');
item['value'] = $(this).attr('value');
if ($(this).hasClass('optionname')){
item['optionprix'] = optionPrix;
}
data_array.push(item);
});
var sortableContent = JSON.stringify(data_array);
$('#custom_fields').val(sortableContent);
};
The html form :
<form id="cf-sortables-form">
<ul>
<li class="ui-state-default">
<small>Radio Buttons</small>
<p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---4969523" id="required---4969523"> <label for="required---4969523">Champs Obligatoire</label></p>
<input type="text" name="radio-buttons-label---4969523___required" value="Utilisateurs :">
<ul id="cf-radio-buttons" class="ui-sortable">
<li class="ui-state-default">
<input type="text" class="optionname" name="single-radio-button---4969523" value="1 ou 2">
<img src="images/icon-euro.png" alt="Prix" width="16" height="16">
<input type="text" class="optionprix" name="single-radio-button---4969523" value="0">
</li>
</ul>
<button class="cfButton button" data-type="single-radio-button"><i class="booked-icon booked-icon-plus"></i> Radio Button</button>
</li>
<li class="ui-state-default">
<small>Checkboxes</small>
<p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---8940009" id="required---8940009"> <label for="required---8940009">Champs Obligatoire</label></p>
<input type="text" name="checkboxes-label---8940009___required" value="Options Payantes :">
<ul id="cf-checkboxes" class="ui-sortable">
<li class="ui-state-default">
<input type="text" class="optionname" name="single-checkbox---8940009" value="Option 1" optionprix="5">
<img src="images/icon-euro.png" alt="Prix" width="16" height="16">
<input type="text" class="optionprix" name="single-checkbox---8940009" value="5">
</li>
</ul>
<button class="cfButton button" data-type="single-checkbox"><i class="booked-icon booked-icon-plus"></i> Checkbox</button>
</li>
<li class="ui-state-default">
<small>Paragraphe de texte</small>
<p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---6402519" id="required---6402519"> <label for="required---6402519">Champs Obligatoire</label></p>
<input type="text" name="paragraph-text-label---6402519___required" value="Remarque éventuelle :">
</li>
</ul>
</form>
The JSON record array :
[{\"name\":\"required---4969523\",\"value\":\"on\"},{\"name\":\"radio-buttons-label---4969523___required\",\"value\":\"Utilisateurs :\"},{\"name\":\"single-radio-button---4969523\",\"value\":\"1 ou 2\",\"optionprix\":\"0\"},{},{\"name\":\"required---8940009\",\"value\":\"on\"},{\"name\":\"checkboxes-label---8940009___required\",\"value\":\"Options Payantes :\"},{\"name\":\"single-checkbox---8940009\",\"value\":\"Option 1\",\"optionprix\":\"5\"},{},{\"name\":\"required---6402519\",\"value\":\"on\"},{\"name\":\"paragraph-text-label---6402519___required\",\"value\":\"Remarque éventuelle :\"}]
I search by analysing each input in the form but I still don't know why it record empty array.
Perhaps I can find a way to espace / avoid the record if item equal {} ?

Problem fixed after found my problem was comming from "button".
I don't know why but the javascript recorded each "button" as an empty object, so I just added a new .not condition on the jquery to filter "button" and that's ok.
$("#cf-sortables-form :input").not("#cf-sortables-form :input[class=optionprix]").not("#cf-sortables-form :button").each(function(){
You can check this jsfiddle =>
http://jsfiddle.net/q8gwcor0/

Summing up value for hidden field when checkbox is clicked not working

I have a checkbox but has the value assigned to the item's name. Now i have this hidden field which has the value assigned to the item's price. now when i run my jquery using the hidden field to calculate the sum of the selected items, it doesn't work. It works the other way around when i assign the price and calc ID to the checkbox and not the hidden field.
Here's my jquery:
<script type="text/javascript">
function calcscore(){
var score = 0;
$(".calc:checked").each(function(){
score+=parseInt($(this).val(),10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
And my html:
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>
The Title
</label>
<input type="hidden" name="title8" value="250">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title
</label>
<input type="hidden" name="title8" value="150">
</li>
<p>Total: PHP <span id="price">0</span></p>
Any insight will be greatly appreciated. Thanks

Your code should be more like the solution below and check how it would be working on jsfiddle: https://jsfiddle.net/yehiaawad/wwtwmaLv/
Your HTML:
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>
The Title
<input type="hidden" name="title8" value="250">
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title
<input type="hidden" name="title8" value="150">
</label>
</li>
<p>Total: PHP <span id="price">0</span></p>
Your JS
function calcscore(){
var score = 0;
var checked=$(".calc:checked ~ input[type=hidden]").each(function(){
score+=parseInt($(this).val());
});
$('#price').text(score.toFixed(2));
}
$(document).ready(function(){
$(".calc").change(function(){
calcscore()
});
});

Radio Buttons Hide / Show everything

i have a field with Radio Buttons: Hide and Show, I want when Hide is selected to hide all fields below and to display all when Show is selected. Below is my code:
<div id="product-options-wrapper" class="product-options">
<dd>
<div class="input-box display">
<ul class="options-list">
<li>
<input class="radio product-custom-option" type="radio" checked="checked"><label for="options_6032_2">Show</label>
</li>
<li>
<input class="radio product-custom-option" type="radio"><label for="options_6032_3">Hide</label>
</li>
</ul>
</div>
</dd>
<dd>
<div class="input-box fontclass">
<select>
<option>Arial </option>
<option>Lato </option>
<option>Disney Print </option>
</select>
</div>
</dd>
<dd>
<div class="input-box">
<input id="mirror" type="text" value="">
</div>
</dd>
<dd class="last">
<div class="colorclass">
<select>
<option>red </option>
<option>black </option>
</select>
</div>
</dd>
</div>
Update:
Radio Buttons don't have a fixed ID or class, the only stable thing in that radio buttons is the text.
Update:
I am almost there i use div:contains function and siblings, the function is work to hide but I don't know why is not work to show again. This is the jquery:
jQuery('div:contains("Hide ")').on('click', function(){
jQuery(this).closest('dd').siblings().hide();
});
jQuery('div:contains("Show ")').on('click', function(){
jQuery(this).closest('dd').siblings().show();
});
this is my html:
<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" price="0" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
<span class="label">
<label for="options_6032_2">Hide </label>
</span>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" price="100" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
<span class="label">
<label for="options_6032_3">
Show
<span class="price-notice">
+
<span class="price">Dkr100.00</span>
</span>
</label>
</span>
</li>
Update:
Maybe this will help, this code is the php code that generate this radio options:
$selectHtml = '<ul id="options-'.$_option->getId().'-list" class="options-list">';
$require = ($_option->getIsRequire()) ? ' validate-one-required-by-name' : '';
$arraySign = '';
switch ($_option->getType()) {
case Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO:
$type = 'radio';
$class = 'radio';
if (!$_option->getIsRequire()) {
$selectHtml .= '<li><input type="radio" id="mylabel options_' . $_option->getId() . '" class="'
. $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
. ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
. ' value="" checked="checked" /><span class="label"><label for="options_'
. $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
}
break;
case Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX:
$type = 'checkbox';
$class = 'checkbox';
$arraySign = '[]';
break;
}

Hiding and showing elements with jQuery/JavaScript is very straightforward. Add a class to the elements you wish to hide (in my example below I have named it hidden), then use the hide and show functions as follows:
$('#options_6032_3').click(function() {
$('.hidden').hide();
})
$('#options_6032_2').click(function() {
$('.hidden').show();
})
Check out this jsfiddle to see how it works.
EDIT
Based on the example you have provided in the comments to this answer, this alternative should work:
var hideRadio = $('li:nth-child(2) input:radio');
var showRadio = $('li:first input:radio');
hideRadio.click(function() {
$(this).closest('dd').siblings(':nth-child(3)').hide();
$(this).closest('dd').siblings(':nth-child(4)').hide();
})
showRadio.click(function() {
$(this).closest('dd').siblings(':nth-child(3)').show();
$(this).closest('dd').siblings(':nth-child(4)').show();
})
Check out this jsfiddle to see how it works.
NOTE:
Your dynamically created HTML code will need to be generated in the same format each time (with the dd and dt tags your most recent code contains).

if($('#radio').is(':checked')) { alert("it's checked"); }

Why don't you add class fields to the <dd> you want to hide and use jQuery or something similar to hide the <dd>. You may also want an identifier like a class or id to the radio buttons. Then you can hide the fields this way.
$(".show").change(function() {
if(this.checked) {
$(".fields").show();
}
});
$(".hide").change(function() {
if(this.checked) {
$(".fields").hide();
}
});
Here's a working fiddle: https://jsfiddle.net/28nboav9/
Is this similar to what you where looking for?

wrap your html code inside the div which need to be show/hide for better code optimization
HTML
<div id="product-options-wrapper" class="product-options">
<dd>
<div class="input-box display">
<ul id="options-6032-list" class="options-list">
<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked"><label for="options_6032_2">Show </label>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()"><label for="options_6032_3">Hide</label>
</li>
</ul>
</div>
</dd>
<div id="toggleVisibility"> //wrapped inside div
<dd>
<div class="input-box fontclass">
<select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
<option price="0" value="42969">Arial </option>
<option price="0" value="42970">Lato </option>
<option price="0" value="42971">Disney Print </option>
</select>
</div>
</dd>
<dd>
<div class="input-box">
<input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
</div>
</dd>
<dd class="last">
<div class="input-box colorclass">
<select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
<option price="0" value="42965">red </option>
<option price="0" value="42966">black </option>
</select>
</div>
</dd>
</div>
</div>
Please add this script into your page/js file
Jquery
$(document).ready(function () {
var $div=$('#toggleVisibility');
$('#options_6032_2').click(function () {
if ($(this).is(':checked')) {
$div.show();
}
})
$('#options_6032_3').click(function () {
if ($(this).is(':checked')) {
$div.show();
}
})
});

Try something like this. It finds the radio's parent DD and hides all it's siblings:
$('#options_6032_2').on('click', function(){
$(this).closest('dd').siblings().show();
});
$('#options_6032_3').on('click', function(){
$(this).closest('dd').siblings().hide();
});
It al depends a bit how dynamic your radio's are build up. You might want to assign a specific class for the selector.
Also see this fiddle: https://jsfiddle.net/cp5ses3y/

This should work
opConfig.reloadPrice = function(show){
if(show){
$('#select_6028,#options_6030_text,#select_6031').show();
}else{
$('#select_6028,#options_6030_text,#select_6031').hide();
}
}
You can change the selector to hide/show whatever you want. The best way I think, is to add a class to all the field you want to hide/show so you will only do $('.classToHideShow').show()
Here is the code with the modification : https://jsfiddle.net/55mrk3xf/

$("#hide").click(function() {
$('div.fontclass').hide();
$('div').children('#mirror').hide();
$('div.colorclass').hide();
});
$("#show").click(function() {
$('div.fontclass').show();
$('div').children('#mirror').show();
$('div.colorclass').show();
});
Try this. It uses a combination of JQuery and relative selectors to achieve the effect you want. Fiddle: https://jsfiddle.net/ut6jc4vp