We Keep Coding

How to retrieve textContent and display on checkbox input

I am trying to build a small program which you enter data into using input fields to build a set of unordered lists containing list items.
I have a checkbox of which that when it is checked, i would like it to display the entire unordered list that contains that bit of text, in this case, atlanta. I would like the rest of the unordered lists which do not contain this text to be set to display: none;
The for loop is the issue, though I have been playing around all day and cannot behave as I would like.
This is the code in question I believe:
checkboxInput.addEventListener('change', (e) => {
const isChecked = e.target.checked;
let ulList = document.getElementsByTagName('ul');
let liList = document.getElementsByTagName('li');
let locationList = document.getElementsByClassName('location');
if (isChecked) {
for (let i = 0; i < ulList.length; i += 1) {
for (let j = 0; j < liList.length; j += 1) {
let ul = ulList[i];
let li = liList[i];
if (li.textContent == 'atlanta') {
ul.style.display = '';
} else {
ul.style.display = 'none';
}
}
}
}
});
Please see a jsFiddle link here.
Any help much appreciated.

A couple of the variables I declared were unnecessary in this piece of code.
The liList variable was replaced with ulList.children.
The second for loop wasn't necessary either.
Here is the eventListener changed to achieve the functionality I required.
checkboxInput.addEventListener('change', (e) => {
const isChecked = e.target.checked;
let ulList = document.getElementsByTagName('ul');
if (isChecked) {
for (let i = 0; i < ulList.length; i += 1) {
let ul = ulList[i];
let liList = ul.children;
let li = liList[1];
if (li.textContent == 'atlanta') {
ul.style.display = 'block';
} else {
ul.style.display = 'none';
}
}
}
});
Thanks to Kris from Treehouse for the answer to this problem.

todolist double click to add class?

I am making a todo list... When the task is finished i need to be able to click it and then add a class to that item... It works but I have to double click.. Any suggestions?
list.onclick = function() {
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
if (!this.classList.contains("checked") || this.classList.contains("checked")) {
this.classList.add("checked");
} else {
this.classList.remove("checked");
}
}
}
}

As I understand purpose of this function is to check or uncheck list element each time user clicks on it. For this purpose, first of all we need to identify if 'class' exists or not and remove it. In other cases just add that 'class' to classList attribute.
list.onclick = function()
{
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++)
{
list[i].onclick = function()
{
if (this.classList.contains("checked")
{
this.classList.remove("checked");
}
else
{
this.classList.add("checked");
}
}
}
}

Values selected in select box cannot be retrieved- jQuery

I am building an application in which I have table with form elements like select, input etc. I want to populate the values selected in form elements to another table.
You can find my code here
JS:
$('button').click(function() {
var rows = $('#table1 tbody tr');
var previewTable = $('#table2 tbody');
previewTable.find('tr').remove();
for (var i = 0; i < rows.length; i++) {
var tr = $('<tr> </tr>');
previewTable.append(tr);
var row_cloned = $(rows[i]).clone();
var cols = rows[i].getElementsByTagName("td");
for (var j = 0; j < cols.length; j++) {
var col_cloned = row_cloned.find('td').clone();
previewTable.find('tr').eq(i).append(col_cloned[j]);
if ($(col_cloned[j]).children().length > 0) {
$(col_cloned[j]).children().each(function(index, item) {
if ($(item).is('select')) {
if ($(item).attr('multiple')) {
var foo = [];
$(item).each(function(i, selected) {
console.log($(selected).val());
foo[i] = $(selected).val();
});
$(col_cloned[j]).text(foo);
} else {
$(col_cloned[j]).text($(item).val());
}
} else if ($(item).is('label')) {
var selected = [];
$(item).find('input:checked').each(function(index, item) {
selected.push($(item).val());
$(col_cloned[j]).append(selected + '<br>');
})
}
})
} else {
$(col_cloned[j]).text($(col_cloned[j]).text());
}
}
}
})
My steps:
Get table1 and table2
Count the number of rows in the table1
Add so many empty rows in the table2
Get each row in table1
Count the td in each row of table1
Find the children in each td
Check if children is select, input, or just plain text
If children is select, determine if it is multi-select or single
Act accordingly for each form elements to copy only values and then append to table2
finish
All this on a button click COPY
Problem: Somehow managed to get the checked input form element values. But failing to get the values selected in select box.
For multi select box my code:
if ($(item).attr('multiple')) {
var foo = [];
$(item).each(function(i, selected) {
console.log($(selected).val());
foo[i] = $(selected).val();
});
$(col_cloned[j]).text(foo);
}
For single select box :
else {
$(col_cloned[j]).text($(item).val());
}
What is my mistake exactly? Thanks in Advance

For selected .val() does not work.You will have to use find() as in reality when you select a select box , its value does not change.
if ($(item).attr('multiple')) {
var foo = [];
$(item).each(function(i, selected) {
foo[i] = $(selected).find(":selected").text(); // see this
});
$(col_cloned[j]).text(foo);
} else {
$(col_cloned[j]).text($(item).find(":selected").text()); // see this
}

For <select> you can't use val().
Using the .val() function on a multi-select list will return an array of the selected values:
This code:
if ($(item).is('select')) {
if ($(item).attr('multiple')) {
var foo = [];
$(item).each(function(i, selected) {
console.log($(selected).val());
foo[i] = $(selected).val();
});
$(col_cloned[j]).text(foo);
} else {
$(col_cloned[j]).text($(item).val());
}
}
Change to this:
if ($(item).is('select')) {
if ($(item).attr('multiple')) {
var foo = $('#multipleSelect').val();
$(col_cloned[j]).text(foo);
} else {
var optionSelected = $(item).find("option:selected");
$(col_cloned[j]).text(optionSelected.val());
}
}

Auto expand child when parent checked on treelist using javascript

Can someone teach me how to expand child item on tree list when parent item was checked in JavaScript?
Current,i had function on JavaScript to check/unchecked parent item and child item. But this function fail to auto expand the child item when parent item was checked. Can someone lead me a hand please?
Here is my JavaScript.
var parenItemSelected = false;
function OnClientNodeClicked(sender, args) {
var currNode = args.get_item();
var childNodes = currNode.get_childItems();
var nodeCount = currNode.get_childItems().length;
var parentItem = currNode.get_parentItem();
if (parentItem) {
parenItemSelected = true;
parentItem.set_selected(true);
}
if (currNode.get_selected()) {
CheckAllChildren(childNodes, nodeCount);
}
else {
UnCheckAllChildren(currNode, childNodes, nodeCount);
}
parenItemSelected = false;
}
function UnCheckAllChildren(currNode, nodes, nodecount) {
var i;
for (i = 0; i < nodecount; i++) {
nodes[i].set_selected(false);
}
currNode.set_selected(false);
}
function CheckAllChildren(nodes, nodecount) {
var i;
if (!parenItemSelected) {
for (i = 0; i < nodecount; i++) {
nodes[i].set_selected(true);
}
}
}
Code from C# or vb.net are welcome.
Thanks.

set first check box checked and others disable from checkbox list in clientside

I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}

If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.

$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});