jQuery convert checkbox selections to array ( when unchecked make it empty)

jQuery convert checkbox selections to array ( when unchecked make it empty) - javascript

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>

Related

Adjust jquery filtering script to run on page reload based on checked checkboxes

I'm working on a filtering script and I need some help.
My question is, how can I check what filters are selected (they remain checked on page reload/going back from a different page) and run the filtering script on page reload?
The page is: https://www.raw-partner.de/wer-wir-sind/team-2/
The user interaction is loading the page - clicking on 'Filter' - selecting the checkboxes/filters user desired - clicking on an entry which redirects to a different page - when going back the same filters must be applied. (note: the previously checked checkboxes remain checked once going back, so the only thing to do is to run the script again)
I can post the script as well.
Any idea on how I can achieve this? Thanks in advance!
HTML:
<ul class="filters box">
<li>
<input name="is-partner" type="checkbox" value="partner" id="partner" />
<label for="partner">Partner</label>
</li>
<li>
<input name="other-job" type="checkbox" value="berufstrager" id="berufstrager" />
<label for="berufstrager"> Berufsträger </label>
</li>
<li>
<input name="other-job" type="checkbox" value="mitarbeiter" id="mitarbeiter" />
<label for="mitarbeiter"> Mitarbeiter </label>
</li>
</ul>
<ul class="filters box">
<li style="font-weight: bold"> Standorte </li>
<li>
<input name="location" type="checkbox" value="munchen" id="munchen" />
<label for="munchen"> München </label>
</li>
<li>
<input name="location" type="checkbox" value="berlin" id="berlin" />
<label for="berlin">Berlin</label>
</li>
<li>
<input name="location" type="checkbox" value="bad-worishofen" id="bad-worishofen" />
<label for="bad-worishofen">Bad Wörishofen</label>
</li>
<li>
<input name="location" type="checkbox" value="gera" id="gera" />
<label for="gera">Gera</label>
</li>
</ul>
<ul class="filters box">
<li style="font-weight: bold"> Partner mit Team </li>
<li>
<input name="parner-team" type="checkbox" value="appelt-duile" id="appelt-duile" />
<label for="appelt-duile"> Appelt/Duile </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="bley" id="bley" />
<label for="bley"> Bley </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="dietrich-kogler" id="dietrich-kogler" />
<label for="dietrich-kogler"> Dietrich/Kögler </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="barth" id="barth" />
<label for="barth"> Dr. Barth </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="buck" id="buck" />
<label for="buck"> Dr. Buck </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="drost" id="drost" />
<label for="drost"> Drost </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="lux-kronig-harbauer" id="lux-kronig-harbauer" />
<label for="lux-kronig-harbauer"> Lux-Krönig/Harbauer </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="metzler" id="metzler" />
<label for="metzler"> Metzler </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="stegmann" id="stegmann" />
<label for="stegmann"> Stegmann </label>
</li>
</ul>
</div>
</div>
<div id="filtering">
<div class="entry" data-id="max-appelt" data-category="partner munchen berufstrager appelt-duile">
<a href="http://www.raw-partner.de/maximilian-appelt-4/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Appelt_P_0613_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Maximilian <br> Appelt</b></h3></a>
</div>
<div class="entry" data-category="partner munchen berufstrager barth">
<a href="http://www.raw-partner.de/dr-hans-guenther-barth/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Barth_P_0187_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Dr. Hans Günther Barth</b></h3></a>
</div>
<div class="entry" data-category="munchen mitarbeiter ">
<a href="http://www.raw-partner.de/katrin-bartl-3/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Bartl_0820_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Katrin <br> Bartl</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter stegmann">
<a href="http://www.raw-partner.de/alexander-baumgaertner-2/"><p><img class="" src="/wp-content/uploads/2018/08/Baumgärtner_0035_F2.png" alt="null" /></p>
<h3 id="name"><b>Alexander <br> Baumgärtner</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">
<a href="http://www.raw-partner.de/margit-baur-3/"><p><img class="" src="/wp-content/uploads/2018/08/Baur_0533_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Margit <br> Baur</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">
<a href="http://www.raw-partner.de/peter-harbauer-3-7/"><p><img class="" src="/wp-content/uploads/2018/08/Bernhardt_0137_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Yvonne <br> Bernhardt</b></h3></a>
</div>
jQuery:
(function($){
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.entry');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.entry').hide().filter($filteredResults).show();
});
$(window).trigger('resize')
})(jQuery);
JSFiddle: https://jsfiddle.net/u39kmoxz/2/
Note: I have a basic understanding of jQuery, not advanced enough to use cookies, I was thinking that since the checkboxes are remaining checked when going back, the only thing that should be done is re-running the script but I can't understand how since the script is being applied on change.

Welcome!
Conceptually, you need to make the function callable from 2 events: change checkbox + page load. Therefore you need to name the function so that you can call it from these 2 events.
(function($){
var $filterCheckboxes = $('input[type="checkbox"]');
var doFiltering = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.entry');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.entry').hide().filter($filteredResults).show();
} // end of doFiltering function
$filterCheckboxes.on('change',doFiltering()); // call it with the on change
doFiltering() // call it when your parent function executes at page load (only executes once)
$(window).trigger('resize')
})(jQuery);

all filters item when select two or more checkbox

I just want to make a filter with checkbox array using jquery and javascript. It works fine when only one checkbox is selected but when I select two or more checkboxes it doesn't show all the divs. Could you please help me to find my mistake. I want to filter through the filter array. The name of our array is FlyList
let FlyList = [{
"id": "1",
"Type_ticket": "systemi",
"Airline": "ata",
"fly_time": "04:00",
"Class_type": "Commercial",
}, {
"id": "2",
"Type_ticket": "charteri",
"Airline": "Air-Tour",
"fly_time": "08:00",
"Class_type": "Commercial",
}, {
"id": "3",
"flight_number": "950",
"Type_ticket": "systemi",
"Airline": "taban",
"fly_time": "11:00",
"Class_type": "Commercial",
"price": "30000",
"time": "11:00",
"capacity": "5",
},
{
"id": "4",
"Type_ticket": "systemi",
"Airline": "mahhan",
"fly_time": "14:00",
"Class_type": "Economical",
}, {
"id": "5",
"Type_ticket": "charteri",
"Airline": "kaspian",
"fly_time": "17:00",
"Class_type": "Commercial",
}, {
"id": "6",
"Type_ticket": "charteri",
"Airline": "kaspian",
"fly_time": "21:00",
"Class_type": "Economical",
},
];
function customFilter(list, field, value) {
let fill = list.filter(item => {
if (typeof(filter) === 'Object') {
value.foreach(val => {
if (item[field] === value) {
return item[field] === value
}
});
}
return item[field] === value
});
console.log(fill);
}
let filterCheckboxes = document.querySelectorAll('.customCheck');
filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change', (e) => {
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
console.log(field, val);
customFilter(FlyList, field, val);
}
}));
function getParents(el, parentSelector /* optional */ ) {
// If no parentSelector defined will bubble up all the way to *document*
if (parentSelector === undefined) {
parentSelector = document;
}
var parents = [];
var p = el.parentNode;
while (p && (p !== parentSelector || p.parentNode)) {
var o = p;
parents.push(o);
p = o.parentNode;
}
parents.push(parentSelector); // Push that parentSelector you wanted to stop at
return parents;
}
function findFilterTypeElement(el) {
var result = null;
var parents = getParents(el);
parents.forEach((item) => {
if (hasClass(item, 'filter_type') && result == null) {
result = item;
}
});
return result;
}
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}
<div class="filters">
<div class="collapse show" id="collapseFilters">
<div class="filter_type" data-field="Type_ticket">
<h6>Type of ticket
<div class="switcher float-left ">
<label class="customToggle small">
<input type="checkbox" name="" id="" class="selectall">
all Type of ticket
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck w-100 " id="filter-check">
<input type="checkbox" name="" value="systemi" class="individual"> systemi
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck w-100" id="filter-check2">
<input type="checkbox" name="" value="charteri" class="individual"> charteri
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
<div class="filter_type airlineSelection" data-field="Airline">
<h6>airline
<div class="switcher float-left">
<label class="customToggle small">
<input type="checkbox" name="" id="">
all airline
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck" id="">
<input type="checkbox" value="ata" name="inlineRadioOptions"> آتا
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="Air-Tour" name="inlineRadioOptions"> ایرتور
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="taban" name="inlineRadioOptions"> تابان
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="frans" name="inlineRadioOptions"> frans
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="emirates" name="inlineRadioOptions"> emirates
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="dubai" name="inlineRadioOptions"> dubai
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
<div class="filter_type" data-field="Class_type">
<h6>Class_type
<div class="switcher float-left">
<label class="customToggle small">
<input type="checkbox" name="" id="">
all Class_type
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck" id="">
<input type="checkbox" value="Economical" name="inlineRadioOptions"> economical
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="Commercial" name="inlineRadioOptions"> commercial
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
<div class="filter_type" data-field="fly_time">
<h6>fly_time
<div class="switcher float-left">
<label class="customToggle small">
<input type="checkbox" name="" id="">
all fly_time
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck" id="">
<input type="checkbox" value="04:00" name="inlineRadioOptions">
04:00-08:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="08:00" name="inlineRadioOptions">
08:00-11:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="11:00" name="inlineRadioOptions">
11:00-14:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="14:00" name="inlineRadioOptions">
14:00-17:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="17:00" name="inlineRadioOptions">
17:00-21:00
<div class="indicator"></div>
</label>
</li>
<li>
<label class="customCheck">
<input type="checkbox" value="21:00" name="inlineRadioOptions">
21:00-24:00
<div class="indicator"></div>
</label>
</li>
</ul>
</div>
</div>
</div>
To get all the filters. And our box when a filter was selected as a group. to be displayed. I use this method.
FilterItems = [
{"Type_ticket" : "[]"},
{"Airliner" : "[]"},
{"fly_time" : "[]"},
{"Class_type" : "[]"}
];
Thank you for your answer. But it gives us three errors.

You have two errors, 1 you don't return new array from customFilter and 2 you don't pass it to next checkbox. So you need to save the FlyList in temp variable name and filter it and update it with value from function.
function customFilter(list, field, value){
return list.filter(item=> {
if(typeof(filter) === 'Object'){
value.foreach(val => {
if (item[field] === value){
return item[field] === value
}
});
}
return item[field] === value
});
}
function checkedInputs() {
return [...document.querySelectorAll('.customCheck')].filter((c) => c.checked);
}
let filterCheckboxes = document.querySelectorAll('.customCheck');
filterCheckboxes.forEach(checkbox =>checkbox.addEventListener('change' , (e) =>{
e.preventDefault();
// you need each checkbox on each change
var checkboxes = checkedInputs();
var filteredList = FlyList;
checkboxes.forEach(checkbox => {
let filterTypeElement = findFilterTypeElement(checkbox);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
console.log(field,val);
filteredList = customFilter(filteredList, field , val);
}
});
}));

On Submit display div based on radio button selection

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

Click on each first child radio (undefined child length)

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

jQuery not seeing click() event

I'm attempting to change a message describing a product's condition when the user clicks on an element. The code below seems to be valid, however when I click on the element (.conditionOption label), my message is not being changed.
I'm using jQuery 1.7.2, so .live(); is still valid, I have however attempted to switch things to .click() with the same results.
HTML CODE
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
<div class="productAttributeLabel">
<label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
<span class="required">*</span>
<span class="name">Cosmetic Condition:</span>
<i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionViewRectangle conditionOption">
<ul class="list-horizontal">
<li class="option">
<label for="4a43f295a3273a1b90567090ac3fc9f3">
<input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
<span class="name">Excellent</span>
</input>
</label>
</li>
<li class="option">
<label for="f03ed6c05af7ea80dc1b75d853f43026">
<input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
<span class="name">Good</span>
</input>
</label>
</li>
<li class="option selected selectedValue">
<label for="1598c6f69093cdf495f564397485e044">
<input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
<span class="name">Fair</span>
</input>
</label>
</li>
</ul>
<div id="conditionExplanationWrapper">
<span id="conditionExplanation">MESSAGE 1</span>
</div>
</div>
</div>
<div class="cf"></div>
</div>
Javascript/jQuery
function conditionExplanation() {
// Set vars for three conditions
var excellentMessage = 'MESSAGE 1';
var goodMessage = 'MESSAGE 2';
var fairMessage = 'MESSAGE 3';
// Assign finder class to div
$('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');
// Build wrapper for message
$('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');
// Insert message corresponding to .conditionOption .selectedValue
$('.conditionOption label').live('click', function(){
if ($('.conditionOption .selectedValue:contains("Excellent")')) {
$('#conditionExplanation').html(excellentMessage);
} else if ($('.conditionOption .selectedValue:contains("Good")')) {
$('#conditionExplanation').html(goodMessage);
} else if ($('.conditionOption .selectedValue:contains("Fair")')) {
$('#conditionExplanation').html(fairMessage);
}
});
}
See Fiddle at https://jsfiddle.net/mvnxg3t4/

The problem is that you're comparing the same value over and over; instead you should make use of this and then use regular text search:
var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
$('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
$('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
$('#conditionExplanation').html(fairMessage);
}
$(document).ready(conditionExplanation);
function conditionExplanation()
{
// Set vars for three conditions
var excellentMessage = 'MESSAGE 1';
var goodMessage = 'MESSAGE 2';
var fairMessage = 'MESSAGE 3';
// Assign finder class to div
$('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');
// Build wrapper for message
$('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');
// Insert message corresponding to .conditionOption .selectedValue
$('.conditionOption label').live('click', function (e) {
var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
$('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
$('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
$('#conditionExplanation').html(fairMessage);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
<div class="productAttributeLabel">
<label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
<span class="required">*</span>
<span class="name">Cosmetic Condition:</span>
<i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionViewRectangle conditionOption">
<ul class="list-horizontal">
<li class="option">
<label for="4a43f295a3273a1b90567090ac3fc9f3">
<input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
<span class="name">Excellent</span>
</input>
</label>
</li>
<li class="option">
<label for="f03ed6c05af7ea80dc1b75d853f43026">
<input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
<span class="name">Good</span>
</input>
</label>
</li>
<li class="option selected selectedValue">
<label for="1598c6f69093cdf495f564397485e044">
<input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
<span class="name">Fair</span>
</input>
</label>
</li>
</ul>
<div id="conditionExplanationWrapper">
<span id="conditionExplanation">MESSAGE 1</span>
</div>
</div>
</div>
<div class="cf"></div>
</div>

Try using on click and add it in on your on load of body.
$(function () {
$('.conditionOption label').click(function () {
});
});

Develop Reference

JavaScript is the programming language of the Web.

jQuery convert checkbox selections to array ( when unchecked make it empty) - javascript

Related

Adjust jquery filtering script to run on page reload based on checked checkboxes

all filters item when select two or more checkbox

On Submit display div based on radio button selection

Click on each first child radio (undefined child length)

jQuery not seeing click() event

Categories

Resources