Develop Reference

Use only one checkbox from two

I have a form that has two checkboxes, now you can click the checkbox on both
The question is, is it possible to make it so that there is only one choice? For example, clicked on the first one, it turned on, clicked on the second one, the first turned off, the second turned on. It should also be possible to uncheck the box at any time. I know that I can use the radio type, but I need only checkboxes
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>

The script would loo something like this. I didn't test this so there might be misspellings causing errors and such.
// get first checkbox element
let box1 = document.getElementByID( "check1" );
// get second checkbox element
let box2 = document.getElementByID( "check2" );
// add events that fires when boxes are checked
box1.addEventListener( "change", function() {
// see if the other box is already checked
if ( box2.checked ) {
// if so, uncheck it
box2.checked = false;
}
});
box2.addEventListener( "change", function() {
if ( box1.checked ) {
box1.checked = false;
}
});
But you can also just use radio buttons and invoke a hidden reset button when you click a checked radio button I think.

Here is another version that will work with any number of checkboxes.
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
inps.forEach(c=>{if(c!==e) c.checked=false})
}))
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
And here is an alternative, using radio buttons:
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
e.checked=e!==inps.last;
inps.last=e.checked?e:null
}))
<div class="input-wrapper">
<label><input name="radio" value="1" type="radio">Check 1</label>
<label><input name="radio" value="2" type="radio">Check 2</label>
<label><input name="radio" value="3" type="radio">Check 3</label>
</div>

Alternate solution:
HTML:
<section>
<label><input type="checkbox" value="CBox 1"> CBox 1</label>
<label><input type="checkbox" value="CBox 2"> CBox 2</label>
<label><input type="checkbox" value="CBox 3"> CBox 3</label>
<label><input type="checkbox" value="CBox 4"> CBox 4</label>
<label><input type="checkbox" value="CBox 5"> CBox 5</label>
</section>
<p> Checkbox acts like a radio button, but can be reset </p>
Javascript:
const sel = document.querySelectorAll('section input[type="checkbox"]');
for (el of sel) {
el.addEventListener('click',
function(e) { sel.forEach( (x) => { if (e.currentTarget != x) x.checked = false; } ); }
);
};

You can use JavaScript / jQuery for it. If check1 is active, just disable check2.
See change event and disabled

Replacing span element with input element

Problem
Once the input is entered in the input field, and the check button is clicked, the input element gets converted into a span element and the check icon gets converted into an edit icon.
I want that when someone clicks on the edit icon, the span element gets converted into the input element again.
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped");
let texts = document.querySelectorAll(".text");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let span = document.createElement("span");
let val = document.createTextNode(text.value ? text.value : "");
span.appendChild(val);
span.classList.add("text2");
items[i].appendChild(span);
if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
if (tgt.classList.contains("check-icon")) {
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
});
}
});
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
Js Fiddle

In your js file.
Modify the check-icon help block a bit, add the following code in the loop of btns.
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
Adding this additional if block will help.
if (tgt.classList.contains("edit-icon")) {
let texts = document.querySelectorAll(".text2");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let input = document.createElement("input");
input.value = text.textContent;
input.classList.add("text");
items[i].appendChild(input);
text.parentNode.replaceChild(input, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
});
});
}
jsFiddel link

Created a span element next to inputs, hidden by default.
Created 2 different click events for edit and check buttons.
On click one element type is made hidden and the other looses its hidden class.
Did not work on styling so you may want to do that yourself.
Also it's better to change .span class to something appropriate.
Khalil's suggestion about making inputs disabled sound good, too.
const container = document.querySelector(".container");
const editIcon = document.querySelector(".edit-icon");
const checkIcon = document.querySelector(".check-icon");
const inputs = [...container.querySelectorAll('.text')]
const spans = [...container.querySelectorAll('.span')]
editIcon.addEventListener('click', () => {
spans.forEach((el, i) => {
el.classList.add('hidden');
inputs[i].classList.remove('hidden');
})
editIcon.classList.add('hidden');
checkIcon.classList.remove('hidden');
})
checkIcon.addEventListener('click', () => {
inputs.forEach((el, i) => {
spans[i].textContent = el.value;
el.classList.add('hidden');
spans[i].classList.remove('hidden');
})
checkIcon.classList.add('hidden');
editIcon.classList.remove('hidden');
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: "Roboto", sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
.hidden {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>

Within a radio-group, how to add and remove class names at radio button parents when checking/unchecking takes place?

I am trying to add a class to the radio button parent element when checked.
The problem is, the class doesn't seem to delete when using removeClass. I can still see the red background when the checkbox is unchecked.
This is what I came up with so far ...
$('input:radio').change(function () {
if($(this).is(':checked')) {
$(this).parent().addClass('selected');
} else {
$(this).parent().removeClass('selected');
}
});
.selected {
background-color: #fff5f5;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a maintenance drone:</p>
<div class="">
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
How do I need to change my code in order to achieve the correct behavior?

No need to check else part in the is(':checked') condition.
On click of radio button;
Firstly, perform removeClass() from all radio button.
Then, addClass() only to the respective checked parent element.
$('input:radio').change(function(){
$('input:radio[name=' + this.name + ']').parent().removeClass('selected'); //remove class "selected" from all radio button with respective name
$(this).parent().addClass('selected'); //add "selected" class only to the checked radio button
});
input[type="radio"] + label {
cursor: pointer;
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
.selected {
background-color: #fff5f5;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>Select a maintenance drone:</p>
<div class="">
<input type="radio" id="huey" name="drone" value="huey">
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>

First remove all classes of parents, then add class to parent of selected one.
$('input[type=radio]').change(function() {
$('input[type=radio]').each(function() {
$(this).parent().removeClass('selected');
});
$(this).parent().addClass('selected');
});
.selected {
background-color: #fff5f5;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a maintenance drone:</p>
<div class="">
<input type="radio" id="huey" name="drone" value="huey" checked>
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>

you can solve it with only css
input[type="radio"] ~ label {
cursor: pointer;
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
input[type="radio"] {
position: absolute;
}
input[type="radio"]:checked ~ label {
background-color: #fff5f5;
color: red;
}

This is a "fat free, valid HTML and CSS only" variant with a slightly improved semantic structure ...
.radio-group label,
.radio-group .content {
display: block;
position: relative;
}
.radio-group label {
cursor: pointer;
}
.radio-group label:hover {
background-color: #fffbfb;
}
.radio-group .content {
z-index: 0;
padding: 1.3em 8px 8px 24px;
margin: -1.3em 0 0 0;
}
.radio-group .label,
.radio-group [type="radio"] {
position: relative;
z-index: 1;
}
.radio-group [type="radio"] {
top: 1px;
}
.radio-group [type="radio"]:checked ~ span {
color: red;
}
.radio-group [type="radio"]:checked ~ .content {
background-color: #fff5f5;
}
<fieldset class="radio-group">
<legend>Select a maintenance drone:</legend>
<label>
<input type="radio" name="drone" value="huey"/>
<span class="label">Huey</span>
<span class="content">... more phrasing content ...</span>
</label>
<label>
<input type="radio" name="drone" value="dewey"/>
<span class="label">Dewey</span>
<span class="content">... more phrasing content ...</span>
</label>
<label>
<input type="radio" name="drone" value="louie"/>
<span class="label">Louie</span>
<span class="content">... more phrasing content ...</span>
</label>
</fieldset>

This works fine
$('input:radio').change(function(){
$('input:radio').parent().removeClass('selected'); // Remove the class from every element
$(this).parent().addClass('selected'); // Add calss to the clicked element
});
.selected {
background-color: #fff5f5;
color: red;
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="">
<input type="radio" id="huey" name="drone" value="huey"
checked />
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey" />
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie" />
<label for="louie">Louie</label>
</div>
</body>

Hide certain inputs and show others using a switch button in jQuery

Hello Stackoverflow community, hope that you're doing well, what I'm trying to do is when I click the switch button I want it to hide certain inputs and show others, my code is a form to add students and teachers, since there are cummon inputs I tought about hide the uncummon one when I press the switch button and when I click it again do the opposite but all of that seem to be failed, I can only hide some and when I click it again it won't work, here what I did:
The Jquery code:
$(document).ready(function(){
$('.teacher').hide();
$('.switch').click(function(){
$('.student').hide();
$('.teacher').show();
});
});
The HTML code:
<label>Student </label>
<label class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</label>
<label> Teacher</label>

$('.teacher').hide();
$('.switch').click(function() {
$('.student').toggle();
$('.teacher').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>

Use $(".teacher, .student").toggle();
Or, if needed, for more granular control you could always get the current checkbox state using
const isChecked = this.checked; // boolean`
Example:
jQuery($ => {
$(".teacher").hide();
$("#switchVal").on("input", function() {
$(".teacher, .student").toggle();
});
});
.toggler {
display: inline-flex;
gap: 0 5px;
cursor: pointer;
}
.toggler-checkbox {
display: inline-block;
width: 35px;
height: 15px;
background: #444;
border-radius: 1.2em;
}
.toggler-checkbox::before {
content: "";
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: #0bf;
border-radius: 1em;
transition: transform 0.3s;
}
.toggler input:checked ~ .toggler-checkbox::before {
transform: translateX(20px);
}
.toggler-label {
user-select: none;
}
.toggler-label:nth-of-type(1) {
order: -1;
color: #0bf;
}
.toggler input:checked ~ .toggler-label:nth-of-type(1) {
color: inherit;
}
.toggler input:checked ~ .toggler-label:nth-of-type(2) {
color: #0bf;
}
<label class="toggler">
<input type="checkbox" id="switchVal" value="0" hidden>
<span class="toggler-checkbox"></span>
<b class="toggler-label">Student</b>
<b class="toggler-label">Teacher</b>
</label>
<ul>
<li class="student">Student: Anna</li>
<li class="student">Student: John</li>
<li class="teacher">Teacher: Mark</li>
<li class="student">Student: Tara</li>
<li class="teacher">Teacher: Zack</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Radio buttons can't be checked after removing 'appearance' in CSS

I have 3 radio buttons that are tied to a function that supposed to change an image inside a div when each button is checked. It's working ok but when I adding CSS style to it so the actual checker won't be visible to only the icons I set will show, it'makes it uncheckable.
Note: when I remove the #sm-jum-btns input CSS and the checkers actually visible the code working. I need it to work also when those checkers are hidden and designed.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
<input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
</div>
<script type="text/javascript">
function changeImg(){
var jumImg = document.getElementById("jum-img");
var radioLeft = document.getElementById("radio_left");
var radioRight = document.getElementById("radio_right");
var radioMiddle = document.getElementById("radio_middle");
if (radioLeft.checked){
jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
}
if (radioRight.checked){
jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
}
if (radioMiddle.checked){
jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
}
}
</script>
CSS:
#sm-jum-btns input {
margin:0;
padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
margin-top: 180px;
}
#sm-jum-btn {
position: relative;
}
.fa-circle-thin {
color: #ffb300;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bold;
}
.fa-circle-thin::before {
position: absolute;
padding: 3.5px;
margin-top:3.5px;
}
.fa-circle {
color: #ffb300;
width: 50px;
height: 50px;
line-height: 50px;
border-radius:50px;
font-size: 30px;
}
.fa-circle-thin:hover {
color: #37100B;
}
#main-jum {
padding: 0;
}
#main-jum img {
width: 100%;
min-height: 400px;
object-fit:cover;
}

Ok after two days of searching and asking I figure it out thanks to this answer.
Basically I should add a for attribute in each label to point it to it's parent input id so it can actually check the input and trigger the function.
more about for attribute you can find here