Develop Reference

Fade on Checkbox for Multiple Div Sections

I have a client that wants to have a checkbox that says "Mark as Compete" and once marked it makes the div with content fade. They basically want a step by step list like a recipe where users can check the box when they are done with a step and have it fade out.
I have been able to do so but not in a friendly way that someone who doesn't know code would be comfortable with editing. I am looking for some help simplifying it.
Current Code:
function ShowHideDivOne(chk_one) {
var one = document.getElementById("one");
one.style.opacity = chk_one.checked ? "0.5" : "1";
}
function ShowHideDivTwo(chk_two) {
var two = document.getElementById("two");
two.style.opacity = chk_two.checked ? "0.5" : "1";
}
function ShowHideDivThree(chk_three) {
var three = document.getElementById("three");
three.style.opacity = chk_three.checked ? "0.5" : "1";
}
div {font-wieght:bold;font-size:30px; margin-top:30px;}
<div id="one">One</div>
<input type="checkbox" id="chk_one" onclick="ShowHideDivOne(this)"/>Mark as done
<div id="two">Two</div>
<input type="checkbox" id="chk_two" onclick="ShowHideDivTwo(this)"/>Mark as done
<div id="three">Three</div>
<input type="checkbox" id="chk_three" onclick="ShowHideDivThree(this)"/>Mark as done
Right now if they wanted to add a "Four," I would have to have the ShowHideDivFour(chk_four) function preprogrammed and then they would have to go in and change all of the ids and onclicks in the div and the checkbox.
I am ok with showing them how to edit the id in the div. What I would prefer is to have a JavaScript code that works for an unlimited number of items in their list and they would only have to change the div id. I understand if they would also have to change the checkbox code but it would be preferable if they didn't.
Any help would be much appreciated.

If, somehow, your headers can come after the checkboxes, you can use the CSS sibling + selector to select it:
div {
font-size: 30px;
margin-bottom: 30px;
}
input:checked+div {
opacity: 0.5;
}
<label for="chk_one">Mark as done</label>
<input type="checkbox" id="chk_one" />
<div id="one">One</div>
<label for="chk_two">Mark as done</label>
<input type="checkbox" id="chk_two" />
<div id="two">Two</div>
<label for="chk_three">Mark as done</label>
<input type="checkbox" id="chk_three" />
<div id="three">Three</div>
Here is a complete, CSS-only solution that uses the above and a little CSS flexbox hack to reverse the display order of the header and checkbox, if you're fine with wrappers:
div.wrapper {
display: flex;
/* 👇 display elements in reverse order */
flex-direction: column-reverse;
}
div.item {
font-size: 30px;
margin-top: 30px;
}
input {
width: fit-content;
}
input:checked~div {
opacity: 0.5;
}
<!-- 👇 notice that the checkboxes come BEFORE
the text, but are displayed as if they are after -->
<div class="wrapper">
<label for="chk_one">Mark as done</label>
<input type="checkbox" id="chk_one" />
<div id="one" class="item">One</div>
</div>
<div class="wrapper">
<label for="chk_two">Mark as done</label>
<input type="checkbox" id="chk_two" />
<div id="two" class="item">Two</div>
</div>
<div class="wrapper">
<label for="chk_three">Mark as done</label>
<input type="checkbox" id="chk_three" />
<div id="three" class="item">Three</div>
</div>
Any "normal" solution (not as hacky as this) would only be attainable through JavaScript.
EDIT: if you're OK with using JS, here's something that looks marginally better by using direct element references in inline event listeners:
div {
font-size: 30px;
margin-top: 30px;
}
<div id="one">One</div>
<input type="checkbox" id="chk_one" onclick="one.style.opacity = (one.style.opacity == 0.5 ? 1 : 0.5)" />
<label for="chk_one">Mark as done</label>
<div id="two">Two</div>
<input type="checkbox" id="chk_two" onclick="two.style.opacity = (two.style.opacity == 0.5 ? 1 : 0.5)" />
<label for="chk_two">Mark as done</label>
<div id="three">Three</div>
<input type="checkbox" id="chk_three" onclick="three.style.opacity = (three.style.opacity == 0.5 ? 1 : 0.5)" />
<label for="chk_three">Mark as done</label>

You can simplify the code by adding a class name to the checkbox and adding an event listener to all elements of that class:
document.querySelectorAll('.markChk').forEach(el => {
el.addEventListener('click', function(event) {
var divID = this.parentElement.previousElementSibling;
divID.style.opacity = el.checked ? "0.5" : "1";
});
});
div {font-weight: bold; font-size: 30px; margin-top: 30px;}
<div id="one">One</div>
<label><input type="checkbox" id="chk_one" class="markChk" /> Mark as done </label>
<div id="two">Two</div>
<label><input type="checkbox" id="chk_two" class="markChk" /> Mark as done </label>
<div id="three">Three</div>
<label><input type="checkbox" id="chk_three" class="markChk" /> Mark as done </label>
Notes:
this.parentElement.previousElementSibling traverses from the checkbox to the previous div
notice the <label>, which allows the user to click on the label, not just the checkbox
to further simplify you likely want to generate the div and checkbox list dynamically
jQuery makes it easier than native JS to manipulate the DOM

How, using a Script, can I make a TagList which interacts with a group of CheckBoxes?

I need a Script for my Asp.Net App which I would like it to do something relatively straightforward and simple. I want a TagList which interacts with a group of CheckBoxes in the View, and just that.
Basically, If I click on a CheckBox below, I want a Tag to appear, in the Tagfield/TagList, with the name that said Checkbox has (which can be the "value=" of the checkbox), and if I click on the X to remove a Tag from the TagList, this unchecks the checkbox associated with that tag. And that's all I need.
Being the code in the View, something as simple as this, which can have a quantity N of Checkboxes.
<div class="wrapper">
<div><input id=1 type="checkbox" name="group" value="Item 1" class="X"/>Item 1</div>
<div><input id=2 type="checkbox" name="group" value="Item 2" class="X"/>Item 2</div>
<div><input id=3 type="checkbox" name="group" value="Item 3" class="X"/>Item 3</div>
......
<div><input id=N type="checkbox" name="group" value="Item N" class="X"/>Item N</div>
</div>
How can I do it? Thanks in advance if you can help me.

You could try to use the Bootstrap Tags Input, check the following sample code:
<div class="wrapper">
<label>Tags :</label>
<input type="text" data-role="tagsinput" id="tagsinput" name="tags" class="form-control"><input type="button" id="btnGetValue" value="Get Value" /><br />
<div><input id=1 type="checkbox" name="group" value="Item 1" class="X" />Item 1</div>
<div><input id=2 type="checkbox" name="group" value="Item 2" class="X" />Item 2</div>
<div><input id=3 type="checkbox" name="group" value="Item 3" class="X" />Item 3</div>
</div>
#section Scripts{
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>
<style type="text/css">
.bootstrap-tagsinput {
width: 100%;
}
.label-info {
background-color: #17a2b8;
}
.label {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
</style>
<script>
$(function () {
//attatch click event to the checkbox, then, based on the checked checkboxes to add value to the tags input.
$(".wrapper input[type='checkbox']").each(function (inde, item) {
$(item).click(function () {
var checkedvalue = [];
$(".wrapper input[type='checkbox']:checked").each(function (index, ele) {
checkedvalue.push($(ele).val());
})
var result = checkedvalue.join(",");
$("#tagsinput").tagsinput('removeAll');
$("#tagsinput").tagsinput('add', result);
});
});
//trace the tag remove event, then, based on the tags to checked/unchecked the checkbox
$("#tagsinput").on('itemRemoved', function () {
var valarray = $("#tagsinput").val().split(",");
$(".wrapper input[type='checkbox']").each(function (index, item) {
if (jQuery.inArray($(item).val(), valarray) != -1) {
$(item).prop("checked", true);
}
else {
$(item).prop("checked", false);
}
});
});
//get the selected tags.
$("#btnGetValue").click(function () {
alert($("#tagsinput").val());
});
});
</script>
}
[Note] The JQuery reference should be loaded first, in this sample, I using the default layout page, so there is no need to add JQuery reference in the section.
The output as below:
More details about using Bootstrap Tags Input, check the Bootstrap Tags Input Samples

Make radio buttons checked /unchecked

$("input[type='radio']").each(function() {
if ($(this).is(":checked")) {
$(this).css('background', 'blue');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" data="cool" name="cool" checked="checked">
<input type="radio" data="cool" name="cool">
<input type="radio" data="cool" name="cool">
My approach is to first check if my inputs are :checked and if they are, put some CSS class with the background color. I achieve that, the next thing I want to is to remove that :checked when users click on radio button or any other (better) idea. After the form is submitted, this code checks if inputs are:checked, the problem is when I want to select another radio button I get something like this:
1 and 2 radio buttons are selected, it should be only 2 :checked

You need to add the else to remove the blue color like :
$("input[type='radio']").each(function () {
if ($(this).is(":checked")) {
$(this).css('background', 'blue');
}else{
$(this).css('background', 'white');
}
});
You could also attach a click event for those radios like :
$("body").on("click", "input[type='radio']", function () {
$("input[type='radio']").css('background', 'white');
$(this).css('background', 'blue');
});

The issue with your JS is that you never remove the class from any of the unselected checkboxes. Also note that each() only runs when the page loads (assuming you've not placed it in an event handler, but the question doesn't show that), so you need to instead run your logic in a change event handler:
var $radio = $("input[type='radio']").on('change', function() {
$radio.removeClass('blue');
$(this).toggleClass('blue', this.checked);
});
That being said, what you're trying to do can be achieved more simply by using CSS:
input {
visibility: hidden;
}
input:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #CCC;
visibility: visible;
}
input:checked:before {
background-color: blue;
}
<input type="radio" data="cool" name="cool" checked="checked">
<input type="radio" data="cool" name="cool">
<input type="radio" data="cool" name="cool">

I think the issue with your code is that you are using each event instead of change or click event. It means that you are trying to change the color of your radio button, even before user has performed any action. Read the following code, this will solve the issue of submitting the form and also customizing the radio button:
$(".radio-button").click(function() {
$(this).addClass("blue-background");
$(this).siblings().removeClass("blue-background");
var radioID = $(this).data('radio');
$('#' + radioID).attr("checked", "checked");
if ($('#' + radioID).siblings(":checked")) {
$('#' + radioID).siblings().removeAttr("checked");
}
});
.blue-background {
background-color: blue;
}
input[type='radio'] {
visibility: hidden;
}
.radio-button {
height: 15px;
width: 15px;
margin: 5px;
border-radius: 50%;
display: inline-block;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<input type="radio" id="radio1" data="cool" name="cool" checked="checked">
<input type="radio" id="radio2" data="cool" name="cool">
<input type="radio" id="radio3" data="cool" name="cool">
<div class="radio-button" data-radio="radio1"></div>
<div class="radio-button" data-radio="radio2"></div>
<div class="radio-button" data-radio="radio3"></div>
</div>
I hope this was helpful.

Show Label of multiple checked checkbox with javascript

I have a list of a few dozen checkboxes as shown in example below. If a user checks several of them I need to show at the bottom of the page which ones was checked, such as:
Option One
Option three
Was trying to do this with onClick so it will add or remove to the list at the bottom of the page when a checkbox is clicked or un-clicked but not able to get it to work.
Example of my checkboxes
HTML
.checkboxes label {
font-family: Open Sans Italic;
font-size: 12px;
color: white;
font-weight: bold;
border-radius: 20px 20px 20px 20px;
background: blue;
padding: 1px 6px;
text-align: left;
}
input[type=checkbox]:checked+label {
color: white;
background: green;
}
<div class="checkboxes">
<input type="checkbox" name="lra" id="1adm" value="selected">
<label for="1adm" class="highlight">Option one</label>
<br>
<input type="checkbox" name="lra" id="2adm" value="selected">
<label for="2adm" class="highlight">Option two</label>
<br>
<input type="checkbox" name="lra" id="3adm" value="selected">
<label for="3adm" class="highlight">Option three</label>
<br>
<input type="checkbox" name="lra" id="4adm" value="selected">
<label for="4adm" class="highlight">Option four</label>
<br>
</div>
Any suggestion on how I can do this with javascript with multiple boxes checked to show at the bottom of the page using onClick of which ones is clicked or not, showing the label such as:
Option one
Option four
if One and four is checked.

You can achieve it with many approaches. In my implementation, I assign to each checkbox an onClick event handler that adds or removes from a Set , its value, and after iterates the Set, dumping inside a container a string with all the selected checkboxes:
// set to store the selected checkboxes values
let items = new Set();
// reference to the dumping container
let resultContainer= document.getElementById('result')
// onclick event handler
function updateItems(e){
// value of the clicked checkbox
let value = e.target.value;
// if value is already in the Set, remove it (input unchecked)
if(items.has(value)) items.delete(value)
// if value is not in in the set, insert it (input checked)
else items.add(value)
//
// set updated ! now dump its contents...
//
// empty string
let result = '';
// iterate Set, and generate string with selected values
items.forEach(i=> result += i +'<br>')
// dump string
resultContainer.innerHTML=result;
}
// select all checkboxes and assign the onclick event handler
let inputs = Array.from (document.querySelectorAll('input') )
inputs.forEach(i => i.onclick=updateItems )
<div class="checkboxes">
<input type="checkbox" name="lra" id="1adm" value="one">
<label for="1adm" class="highlight">Option one</label>
<br>
<input type="checkbox" name="lra" id="2adm" value="two">
<label for="2adm" class="highlight">Option two</label>
<br>
<input type="checkbox" name="lra" id="3adm" value="three">
<label for="3adm" class="highlight">Option three</label>
<br>
<input type="checkbox" name="lra" id="4adm" value="four">
<label for="4adm" class="highlight">Option four</label>
<br>
</div>
<br>
<div>Selected values</div>
<div id="result"></div>
Note : This will only work, if the initial state of all checkboxes is Unchecked

This can work with onClick event on each checkbox and some Javascript.
<input type="checkbox" name="lra" id="1adm" value="selected" onclick="myFunction('1adm')">
<div id="footer" />
<script>
function myFunction(checkId) {
var checkBox = document.getElementById(checkId);
var text = document.getElementById("footer");
if (checkBox.checked == true){
//add it to footer text
} else {
//remove from footer text
}
}
</script>

Try out this example, although code could have been reasonably short :)
let selector = 'input[type="checkbox"][name="lra"]';
let updateStatus = function() {
let labels = [];
Array.prototype.slice.call(document.querySelectorAll(selector + ':checked + label')).forEach(function(l) {
labels.push(l.textContent || l.innerHTML);
});
document.querySelector('#checkStatus').innerHTML = (labels.join('<br/>') || 'Kindly choose from above options');
};
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.slice.call(document.querySelectorAll(selector)).forEach(function(c) {
c.addEventListener('click', function(e) {
e.stopPropagation();
updateStatus();
});
});
updateStatus(); /* run on page load */
});
.checkboxes label {
font-family: Open Sans Italic;
font-size: 12px;
color: white;
font-weight: bold;
border-radius: 20px 20px 20px 20px;
background: blue;
padding: 1px 6px;
text-align: left;
}
input[type=checkbox]:checked+label {
color: white;
background: green;
}
#checkStatus {
border-top: 1px solid #ccc;
padding: 1rem;
margin-top: .3rem;
}
<div class="checkboxes">
<input type="checkbox" name="lra" id="1adm" value="selected">
<label for="1adm" class="highlight">Option one</label>
<br>
<input type="checkbox" name="lra" id="2adm" value="selected">
<label for="2adm" class="highlight">Option two</label>
<br>
<input type="checkbox" name="lra" id="3adm" value="selected">
<label for="3adm" class="highlight">Option three</label>
<br>
<input type="checkbox" name="lra" id="4adm" value="selected">
<label for="4adm" class="highlight">Option four</label>
<br>
</div>
<div id="checkStatus"></div>

Changing the state of B by selecting A or C with CSS/HTML/JavaScript

I've a 3 way html/CSS/JavaScript toggle (radio buttons) set up here.
3 options: A / "X" / B Where "X" is none.
HTML
<div class="ABSelector">
<label class="Astate">
A
<input name="state" type="radio" value="A" />
</label>
<label class="nostate">
x
<input name="state" type="radio" value="" checked />
</label>
<label class="Bstate">
B
<input name="state" type="radio" value="B" />
</label>
</div>
Relevant bit of the CSS
label {
cursor: pointer;
display: block;
float: left;
width:40px;
height:40px;
//background-color:green;
line-height:40px;
text-align:center;
}
label.Astate.selected {
background-color:indianred;
color: white;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
label.Astate.selected .nostate{
color:grey;
}
label.Bstate.selected {
background-color:orange;
color: white;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
label.nostate.selected {
background-color:white;
color: white;
}
Javascript
window.addEvent('domready', function() {
$$('input').set({
events: {
change: function(el) {
$$('label').removeClass('selected');
this.getParent('label').addClass('selected');
}
}
});
});
The JavaScript enables/disables .selected
When the page loads initially the X is visible. Only after the first clicks the X will then only appears if A or B has been clicked. If the X is clicked it disappears.
I'd like to set it so the X only appears when either A or B is clicked. even when the page loads.
Am I missing something on the CSS side or does this need to be solved with JavaScript?

You can just amend your html with this, adding the selected class to your label, making it in fact, invisible:
<label class="nostate selected">
x
<input name="state" type="radio" value="" checked />
</label>

It is happening because of
label.nostate.selected {
background-color: white;
color: white;
it sets color of text to white which is not visible as background in white. Change color of text or its background