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>
Related
On loading of the website, the navbar's expected design is
I have tried this, but wasn't able to set the button's state as clicked.
The output I achieved in video format : https://files.fm/u/zpnp3t2ee
You could try with input radio buttons.
Which ever [type="radio"] that is checked, will have the colored bottom border.
Note: I'm using FontAwesome for the menu icons.
.menu {
display: block;
}
.menu .menu-item {
cursor: default;
display: inline;
}
.menu .menu-item [type="radio"] {
position: absolute;
left: -100vw;
}
.menu .menu-item [type="radio"]:checked ~ label {
border-bottom: 4px solid #080;
}
.menu .menu-item label {
border-bottom: 4px solid transparent;
cursor: pointer;
display: inline-block;
padding: 4px 8px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<div class="menu">
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemDashboard" value="Dashboard" checked>
<label for="MenuItemDashboard"><span class="fa fa-tachometer-alt"></span> Dashboard</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemClasses" value="Classes">
<label for="MenuItemClasses"><span class="fa fa-chalkboard"></span> Classes</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemTimeTable" value="TimeTable">
<label for="MenuItemTimeTable"><span class="fa fa-calendar-alt"></span> Time Table</label>
</div>
</div>
<label for="seeker" class="checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
I have multiple HTML radio inputs which are wrapped around labels (https://i.imgur.com/GLdqodq.png) when a radio is selected for say input name "designation" I'd like to add a border color to the label of the radio button that was selected and remove the border from the other labels (https://i.imgur.com/LOMlBUP.png), here's the the JS code I tried using but for some reason when a radio button is unchecked JS can't seem to detect the event.
const radios = document.querySelectorAll('.checkbox input')
radios.forEach((radio) => {
radio.addEventListener('change', e => {
if (e.target.checked) {
// logic to add label border
} else {
// logic to remove label border
}
})
})
I know this can be done using the CSS plus (+) operator but seems like that would require the label to preceded the input, something I wouldn't want to do. However I'm open to using a CSS method as long as the markup wouldn't have to be changed.
const inputs= document.body.querySelectorAll("input")
document.addEventListener("change", (e)=>{
inputs.forEach(input=>{
if(input.checked){
input.labels[0].style="border-style: solid; padding: 10px;"
}
if(!input.checked){
input.labels[0].style=""
}
})
})
here is the js logic
You can also try this code snippet. I have also provided the required styling if you want.
document.querySelector(".first-checkbox").addEventListener('click', function(){
document.querySelector(".first-checkbox").classList.add("active");
document.querySelector(".second-checkbox").classList.remove("active");
})
document.querySelector(".second-checkbox").addEventListener('click', function(){
document.querySelector(".second-checkbox").classList.add("active");
document.querySelector(".first-checkbox").classList.remove("active");
})
.first-checkbox,.second-checkbox{
border:1px solid #D3D3D3;
border-radius:5px;
padding:5px;
}
.checkbox-container{
width:80%;
display:flex;
justify-content:space-around;
padding:20px;
border:1px solid #C0C0C0;
border-radius:5px;
}
.active{
border:1px solid black;
border-radius:5px;
padding:5px;
}
<div class="checkbox-container">
<label for="seeker" class="first-checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="second-checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
</div>
You can simply do it css using input:checked selector
Take an example from below code and codepen link https://codepen.io/naren-irain/pen/XWXWWqq
.radiobox {
display: inline-block;
cursor: pointer;
user-select: none;
}
.radiobox input {
position: absolute;
opacity: 0;
}
.radiobox .check {
background: #fff;
border: 1px solid #979797;
border-radius: 50%;
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
margin-right: 5px;
vertical-align: top;
}
.radiobox span, .radioTab span, .checkbox span {
display: inline-block;
vertical-align: top;
}
.radiobox .check i,
.radioTab .check i {
background: #0db837;
border-radius: 50%;
display: block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
opacity: 0;
transform: scale(0.75);
transition: all 0.3s;
}
.radiobox input:checked+.check,
.radioTab input:checked+ span .check {
border-color: #5cb85c;
}
.radiobox input:checked+.check i,
.radioTab input:checked+ span .check i {
opacity: 1;
transform: scale(1);
}
<h4>Select any one option</h4>
<label class="radiobox" for="one">
<input type="radio" id="one" name="designation" value="one" />
<span class="check"><i></i></span>
<span>This is one option</span>
</label>
<br/>
<br/>
<label class="radiobox" for="two">
<input type="radio" id="two" name="designation" value="two" />
<span class="check"><i></i></span>
<span>Never think this is an option</span>
</label>
I have a requirement to design the dropdown with multiselect option with checkbox using ASP.NET controls and also i need to select checkboxes while binding the values on the dropdown. Please help
you can use following open source library to get your goal its simple and really amazing
http://wenzhixin.net.cn/p/multiple-select/
Please check this, I developed this similar dropdown for my project.
//Multiple Dropdown Select
$('.multiDrop').on('click', function (e) {
e.stopPropagation();
$(this).next('ul').slideToggle();
});
$(document).on('click', function (){
if (!$(event.target).closest('.wrapMulDrop').length) {
$('.wrapMulDrop ul').slideUp();
}
});
$('.wrapMulDrop ul li input[type="checkbox"]').on('change', function () {
var x = $('.wrapMulDrop ul li input[type="checkbox"]:checked').length;
if (x != "") {
$('.multiDrop').html(x + " " + "selected");
} else if (x < 1) {
$('.multiDrop').html('Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>');
}
});
.wrapMulDrop {
width: 50%;
display: inline-block;
position: relative;
}
.multiDrop {
width: 100%;
padding: 5%;
background-color: transparent;
border: 1px solid #ccc;
color: #999;
text-align: left;
}
.multiDrop:focus {
outline: none;
}
.wrapMulDrop ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;
z-index: 5;
display: none;
}
.wrapMulDrop ul li {
list-style-type: none;
background-color: #e5801d;
padding: 1% 6%;
}
.wrapMulDrop ul li:hover {
background-color: #33414e;
}
.wrapMulDrop ul li label {
width: 100% !important;
cursor: pointer;
margin: 0 !important;
color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapMulDrop">
<button type="button" class="multiDrop">Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>
</button>
<ul>
<li>
<input type="checkbox" id="list1">
<label for="list1">Template 1</label>
</li>
<li>
<input type="checkbox" id="list2">
<label for="list2">Template 2</label>
</li>
<li>
<input type="checkbox" id="list3">
<label for="list3">Template 3</label>
</li>
<li>
<input type="checkbox" id="list4">
<label for="list4">Template 4</label>
</li>
</ul>
</div>
Hi everyone i am trying to make a checkbox using CSS.
I have created this DEMO from codepen.io
In this demo you can see there is a tree checkbox button (YES,NO,MAYBE)
My question is this: Let's say the user first clicked the button YES.The user then gave up and click on the NO button. I want to make it when user clicked NO button then Yes button automatically unchecked. How can i do that anyone can help me ?
HTML
<div class="container">
<input type="checkbox" class="yesno"/>Yes
<input type="checkbox" class="yesno"/>no
<input type="checkbox" class="yesno"/>maybe
</div>
CSS
.container {
margin: 50px;
}
.yesno {
-webkit-appearance: none;
-moz-appearance: none;
width: 30px;
height: 20px;
border-radius: 14px;
outline: 0;
background: #9da6b0;
-webkit-transition: all 0.15s ease-in-out;
cursor: pointer;
}
.yesno:after {
content: "";
display: block;
width: 14px;
height: 14px;
background: #fff;
border-radius: 11px;
position: relative;
top: 3px;
left: 3px;
-webkit-transition: all 0.15s ease-in-out;
}
.yesno:checked {
background: #529ecc;
}
.yesno:checked:after {
left: 13px;
}
You could simply make those elements radio buttons with the same name attribute:
Updated Example
In doing so, the elements are mutually exclusive, and only one can be selected at once.
<div class="container">
<input type="radio" name="yes-no" class="yesno"/>Yes
<input type="radio" name="yes-no" class="yesno"/>no
<input type="checkbox" class="yesno"/>maybe
</div>
They should definitely be radio buttons, but here's the JavaScript.
<div class="container">
<input type="checkbox" class="yesno" id="yesCheckbox"/>Yes
<input type="checkbox" class="yesno" id="noCheckbox"/>no
<input type="checkbox" class="yesno" id="maybeCheckbox"/>maybe
</div>
$('#yesCheckbox').click(function() {
if($(this.prop('checked')))
{
$('#noCheckbox').prop('checked', false);
}
});
I want to create a multiple selection dropbox list. Actually I have to select more than one option using a dropdown menu. When I simply do this as shown bellow:
<select>
<option><input type="checkbox"></option>
</select>
Then checkbox is showing in front of dropdown field. But I want to create it for each option not for as a whole so that I can select more than option. Is there any way to do this?
Here is a simple dropdown checklist:
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>
This can't be done in just HTML (with form elements into option elements).
Or you can just use a standard select multiple field.
<select multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
I have to say in advance that I was greatly inspired by the answer of Naveen so I created my own solution based on the answer.
Following 3 functions are the basis of our multiselect:
initiazation function - detects when user clicks away in order to close the dropdown
function that detects when user clicks on dropdown to uncollapse it
function that detects checkbox click events to update the label
few improvements include:
design as in bootstrap 5
collapse when clicking away
updating the label with list of values
added Y-axis overflow with scrollbar
also I tried to stick to native JS (no jQuery) and to use as much of a native Bootstrap 5 styling as possible
here is the video:
I had no intentions to make a ready to use solution that would suit every persons' needs so please adjust it to your liking. I am personally looking forward to adding a search feature.
fiddle:
window.onload = (event) => {
initMultiselect();
};
function initMultiselect() {
checkboxStatusChange();
document.addEventListener("click", function(evt) {
var flyoutElement = document.getElementById('myMultiselect'),
targetElement = evt.target; // clicked element
do {
if (targetElement == flyoutElement) {
// This is a click inside. Do nothing, just return.
//console.log('click inside');
return;
}
// Go up the DOM
targetElement = targetElement.parentNode;
} while (targetElement);
// This is a click outside.
toggleCheckboxArea(true);
//console.log('click outside');
});
}
function checkboxStatusChange() {
var multiselect = document.getElementById("mySelectLabel");
var multiselectOption = multiselect.getElementsByTagName('option')[0];
var values = [];
var checkboxes = document.getElementById("mySelectOptions");
var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
for (const item of checkedCheckboxes) {
var checkboxValue = item.getAttribute('value');
values.push(checkboxValue);
}
var dropdownValue = "Nothing is selected";
if (values.length > 0) {
dropdownValue = values.join(', ');
}
multiselectOption.innerText = dropdownValue;
}
function toggleCheckboxArea(onlyHide = false) {
var checkboxes = document.getElementById("mySelectOptions");
var displayValue = checkboxes.style.display;
if (displayValue != "block") {
if (onlyHide == false) {
checkboxes.style.display = "block";
}
} else {
checkboxes.style.display = "none";
}
}
.multiselect {
width: 100%;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#mySelectOptions {
display: none;
border: 0.5px #7c7c7c solid;
background-color: #ffffff;
max-height: 150px;
overflow-y: scroll;
}
#mySelectOptions label {
display: block;
font-weight: normal;
display: block;
white-space: nowrap;
min-height: 1.2em;
background-color: #ffffff00;
padding: 0 2.25rem 0 .75rem;
/* padding: .375rem 2.25rem .375rem .75rem; */
}
#mySelectOptions label:hover {
background-color: #1e90ff;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="form-group col-sm-8">
<label for="dur">BS original select</label>
<select id="dur" class="form-select">
<option value="12" selected>One Year</option>
<option value="24">Two Year</option>
<option value="36">Three Year</option>
<option value="48">Four year</option>
<option value="60">Five Year</option>
</select>
</div>
<div class="form-group col-sm-8">
<label for="myMultiselect">BS custom multiselect</label>
<div id="myMultiselect" class="multiselect">
<div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
<select class="form-select">
<option>somevalue</option>
</select>
<div class="overSelect"></div>
</div>
<div id="mySelectOptions">
<label for="one"><input type="checkbox" id="one" onchange="checkboxStatusChange()" value="one" /> First checkbox</label>
<label for="two"><input type="checkbox" id="two" onchange="checkboxStatusChange()" value="two" /> Second checkbox</label>
<label for="three"><input type="checkbox" id="three" onchange="checkboxStatusChange()" value="three" /> Third checkbox</label>
<label for="four"><input type="checkbox" id="four" onchange="checkboxStatusChange()" value="four" /> Third checkbox</label>
<label for="five"><input type="checkbox" id="five" onchange="checkboxStatusChange()" value="five" /> First checkbox</label>
<label for="six"><input type="checkbox" id="six" onchange="checkboxStatusChange()" value="six" /> Second checkbox</label>
<label for="seven"><input type="checkbox" id="seven" onchange="checkboxStatusChange()" value="seven" /> Third checkbox</label>
<label for="eight"><input type="checkbox" id="eight" onchange="checkboxStatusChange()" value="eight" /> First checkbox</label>
<label for="nine"><input type="checkbox" id="nine" onchange="checkboxStatusChange()" value="nine" /> Second checkbox</label>
<label for="ten"><input type="checkbox" id="ten" onchange="checkboxStatusChange()" value="ten" /> Third checkbox</label>
</div>
</div>
</div>
</div>
You can always use multiple or multiple = "true" option with a select tag, but there is one jquery plugin which makes it more beautiful. It is called chosen and can be found here.
This fiddle-example might help you to get started
Thank you.
Very simple code with Bootstrap and JQuery without any additional javascript code :
HTML :
.dropdown-menu label {
display: block;
}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<form class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<label class="dropdown-item"><input type="checkbox" name="" value="one">First checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="two">Second checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="three">Third checkbox</label>
</form>
</div>
https://codepen.io/funkycram/pen/joVYBv
Multiple drop downs with checkbox's and jQuery.
jQuery(function($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event) {
var element = $(this).parent();
if (element.hasClass('visible')) {
element.removeClass('visible');
} else {
element.addClass('visible');
}
});
});
.dropdown-check-list {
display: inline-block;
width: 100%;
}
.dropdown-check-list:focus {
outline: 0;
}
.dropdown-check-list .anchor {
width: 98%;
position: relative;
cursor: pointer;
display: inline-block;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
border: 1px #ccc solid;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor">Which development(s) are you interested in?</span>
<ul class="items">
<li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns" /><label for="answers_2529_the-lawns">The Lawns</label></li>
<li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence" /><label for="answers_2529_the-residence">The Residence</label></li>
</ul>
</div>
Simply use bootstrap-multiselect where you can populate dropdown with multiselect option and many more feaatures.
For doc and tutorials you may visit below link
https://www.npmjs.com/package/bootstrap-multiselect
http://davidstutz.de/bootstrap-multiselect/