Develop Reference

Error when trying to work on drop down with multi 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;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.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;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<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>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
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;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.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;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

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>

Cannot Bind dynamically generated input radio on click

I am trying to make a dropdown based off of some dynamically generated radio inputs that i cannot control. I have it working in a codepen, but those radio inputs are not being dynamically generated. I feel like I am close, but may be having some syntax issues. Any suggestions?
jQuery:
(function () {
return $('.cart-dropdown-select').each(function (idx, el) {
var $select, $trigger, $radio;
$select = $(el);
$trigger = $select.find('.trigger');
$radio = $select.find(".radio");
$select.removeClass("is-open");
$select.on("click", function (e) {
return $select.toggleClass("is-open");
});
$select.on("click", "input[name='radio']", function (e) {
console.log($(this));
$select.removeClass("no-selection");
return $select.toggleClass("is-open");
$(this).parent().addClass("checked");
});
});
}).call(this);
SCSS:
.cart-dropdown-select {
position: relative;
display: inline-block;
padding: 6px 24px 6px 6px;
box-shadow: 0 0 0 1px #000;
border-radius: 4px;
&.no-selection {
label:first-of-type {
display: block;
height: auto;
}
.radio:first-of-type {
display: block;
}
}
.radio, .enabled{
display: none;
}
&.is-open {
input + label {
margin-top: 3px;
&:first-of-type {
margin-top: 0;
}
&::after {
content: "\A"; // hack to force linebreak
white-space: pre;
}
}
.radio, .enabled{
display: block;
}
}
&.is-open input,
&.is-open input + label,
input:checked,
input:checked + label, .checked{
display: block;
height: auto;
}
input,
input + label {
display: block;
height: 0;
overflow: hidden;
}
&::after {
position: absolute;
content: '';
display: block;
width: 12px;
height: 12px;
border: 6px solid #fff;
border-top-color: blue;
top: 11px;
right: 6px;
cursor: pointer;
font-size: 9px;
box-sizing: border-box;
}
input[type="radio"] {
display: none;
opacity: 0;
width: 0;
height: 0;
+ label {
position: relative;
color: blue;
&:hover {
color: grey;
cursor: pointer;
}
}
&:disabled {
+ label {
color: blue;
padding-left: 0;
&::before {
display: none;
}
}
}
&:checked {
+ label {
color: grey;
&::before {
background: $pop;
}
}
}
}
}
HTML (layout example):
<div class='cart-dropdown-select is-open no-selection'>
<div class="radio">
<input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
<label for='disabled'>Select Option</label>
</div>
<div class="radio">
<input id='foo1' name='radios' type='radio' value='foo1'>
<label for='foo1'>Foo1</label>
</div>
<div class="radio">
<input id='foo2' name='radios' type='radio' value='foo2'>
<label for='foo2'>Foo2</label>
</div>
<div class="radio">
<input id='foo3' name='radios' type='radio' value='foo3'>
<label for='foo3'>Foo3</label>
</div>
</div>
Also a link to the codepen, again this content in the codepen is not being dynamically driven, so it works fine there.
https://codepen.io/ascarb1/pen/LKdKjE

I ended up changing a bit of the HTML around so the bind can happen within a class that is not being dynamically loaded. This seems to have worked. Feel free to leave feedback if there is still a better solution:
jQuery:
(function () {
return $('.cart-dropdown-select').each(function (idx, el) {
var $select, $trigger, $radio;
$select = $(el);
$trigger = $select.find('.trigger');
$radio = $(".radio");
$select.removeClass("is-open");
$select.on("click", function (e) {
return $select.toggleClass("is-open");
});
$select.on("click", ".enabled input", function() {
$select.toggleClass("no-selection");
$(this).parentsUntil($radio).toggleClass("checked");
return $select.toggleClass("is-open");
});
});
}).call(this);
HTML (Example):
<div class='cart-dropdown-select is-open no-selection'>
<input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
<label for='disabled'>Select Option</label>
<div class="radio">
<label class="enabled" for='foo1'>
<input id='foo1' name='radios' type='radio' value='foo1'>
Foo1</label>
</div>
<div class="radio">
<label class="enabled" for='foo2'>
<input id='foo2' name='radios' type='radio' value='foo2'>
Foo2</label>
</div>
<div class="radio">
<label class="enabled" for='foo3'>
<input id='foo3' name='radios' type='radio' value='foo3'>
Foo3</label>
</div>
</div>
The SCSS did not change.

simple jQuery or javascript multiple dropdown checklist

I have jquery UI 1.7 and jquery 1.3.2 version. I want to have a combobox with multiple check list in it as shown in picture. Can someone please provide me some simple solution using pure HTML and javscript or JQuery. For the below one, I do not know how to use it
But I do not want any complex code or imports of libraries, preferably in simple javascript or jQuery e.g. jQuery("abcd").multipselect. Please also tell me how and where to put the files etc
Thank you
Aiden

i think this will meet what you want
<html>
<head></head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<style>
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #d3d3d3;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 25px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #bdbdbd;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
</style>
<body>
<dl class="dropdown">
<dt>
<a href="#">
<span class="hide">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="All" />Select All</li>
<li>
<input type="checkbox" value="January" />January</li>
<li>
<input type="checkbox" value="February" />February</li>
<li>
<input type="checkbox" value="March" />March</li>
<li>
<input type="checkbox" value="April" />April</li>
<li>
<input type="checkbox" value="May" />May</li>
<li>
<input type="checkbox" value="June" />June</li>
<li>
<input type="checkbox" value="July" />July</li>
<li>
<input type="checkbox" value="August" />August</li>
<li>
<input type="checkbox" value="September" />September</li>
<li>
<input type="checkbox" value="October" />October</li>
<li>
<input type="checkbox" value="November" />November</li>
<li>
<input type="checkbox" value="December" />December</li>
</ul>
</div>
</dd>
</dl>
<script>
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
function appendToMultiSelect(title){
var itemLen = $('.multiSel span').length;
if( itemLen > 0){
var lastItem = $('.multiSel span').last();
lastItem.append(",") ;
}
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
}
$('.mutliSelect input[type="checkbox"]').change(function(){
if($(this).val() != "All")
{
var title = $(this).val() ;
if ($(this).is(':checked')) {
appendToMultiSelect(title);
$(".hide").hide();
} else {
$(".mutliSelect").find('li input[value=All]').prop('checked', false);
$('span[title="' + title + '"]').remove();
var itemLen = $('.multiSel span').length;
if( itemLen > 0){
var lastItem = $('.multiSel span').last();
lastItem.html(lastItem.html().replace(',','')) ;
}
else{
$(".hide").show();
}
var ret = $(".hide");
$('.dropdown dt a').append(ret);
}
}
else
{
//clear selected items
$('.multiSel').html('');
if ($(this).is(':checked')) {
$(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
var option = $(this);
option.prop('checked', true);
title = option.val() ;
appendToMultiSelect(title);
});
$(".hide").hide();
}
else{
$(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
var option = $(this);
option.prop('checked', false);
});
$(".hide").show();
}
}
});
</script>
</body>
</html>

Use javascript variable in html and css

<form action="/key" method="POST">
<label>key_1:</label><br/>
<input type="text" name="a" pattern="^[a-zA-Z]+$" required/><br />
<label>key_2: </label><br />
<input type="text" name="b" pattern="^[a-zA-Z]+$" required/><br />
<input type="submit" name="submit" value="REQUEST" />
</form>
var socket = io.connect();
jQuery(function($) {
var aCounter = $('li.a'),
bCounter = $('li.b'),
aCounterPercentage = $('li.a span'),
bCounterPercentage = $('li.b span'),
aList = $('#a ul'),
bList = $('#b ul');
socket.on('percentages', function(data) {
aCounter
.css("width", data.a + '%');
aCounterPercentage
.text(Math.round(data.a * 10) / 10 + '%');
bCounter
.css("width", data.b + '%');
bCounterPercentage
.text(Math.round(data.b * 10) / 10 + '%');
});
socket.on('a', function(data) {
$('<img />')
.attr('src', data.avatar)
.load(function() {
aList
.prepend($('<li>')
.prepend($('<p>').text(data.user + ': ' + data.text))
.prepend($(this)));
});
});
socket.on('b', function(data) {
$('<img />')
.attr('src', data.avatar)
.load(function() {
bList
.prepend($('<li>')
.prepend($('<p>').text(data.user + ': ' + data.text))
.prepend($(this)));
});
});
});
body {
font: 100% Helvetica, Arial, sans-serif
}
ul.percentage {
width: 100%;
float: left
}
ul.percentage li {
display: block;
width: 0;
padding: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
float: left;
clear: left
}
ul.percentage li.a {
background: #ff0066;
color: #fff
}
ul.percentage li.b {
background: #000;
color: #fff
}
ul.percentage li span {
float: right;
display: block
}
ul.tweets {
float: left;
clear: both
}
#stream {
float: left;
clear: both;
width: 100%
}
#stream ul {
list-style: none
}
#stream ul li {
float: left;
clear: left;
width: 100%;
border-bottom: 1px solid #ccc;
: 5px;
padding: 5px 0
}
#stream ul li:nth-child(even) {
background: #f8f5f6;
}
#stream ul li img {
float: left;
margin-right: 10px;
padding: 5px
}
#a {
width: 45%;
float: left
}
#b {
width: 45%;
float: right
}
<h1>GRAPH BASED ON THE KEYWORD</h1>
<ul class="percentage">
<li class="a">
a
<span>0</span>
</li>
<li class="b">
b
<span>0</span>
</li>
</ul>
<section id="stream">
<section id="a">
<h2>tweets of A</h2>
<ul></ul>
</section>
<section id="b">
<h2>tweets of B</h2>
<ul></ul>
</section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
this is my code i am going to fetch the a and b value and will be assigned what i will give in my from.html input box can anybody help me how i have to do it. that variable should display in my ul and li class .

If you have some inputs let's say
<input type="text" id="inputA" name="inputA">
<input type="text" id="inputB" name="inputB">
and then you want to introduce the values in the list, I would recommend use some ids and classes.
<ul id="ab_list" class="percentage">
<li id="li_a">
<span class="val">a</span>
<span class="per">0</span>
</li>
<li id="li_b">
<span class="val">b</span>
<span class="per">0</span>
</li>
</ul>
So you can then easily use jQuery to do
<script>
var data_a = $("#inputA").val();
var data_b = $("#inputB").val();
$("#ab_list #li_a .val").html(data_a);
$("#ab_list #li_b .val").html(data_b);
<script>
Here you have an initial jsfiddle from where you can continue with your research/work http://jsfiddle.net/pfkx2nm7/. Of course you would need some kind of event (button click, key enter, form submit...etc) to submit your changes in the input box.
I hope it helps :)