I created nested checkboxes with psuedo(:before) icon and my toggle is not work correctly
where is my fold ? if u check it out you gonna see it's not going to work as expected
my html structure which is below
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li >
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
my css structure
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
/*
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
*/
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
and my jquery
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
/*
$('.new-checkbox li input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").toggleClass("downCheck");
});
*/
if($('.new-checkbox li:has("> ul")')) {
$('.new-checkbox li input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").toggleClass("downCheck");
});
}
});
and to see on codepen
Related
Looking to build a multiple choice test that when a button is clicked for answering question, the next questions and answers load - been looking at local storage and ran a debug with console that gave me the following error msg " Uncaught TypeError: Cannot read property 'addEventListener' of null" first time coder so any help would be greatly appreciated - thank you
// Questions + Answers from local storage//
var testquestions = document.getElementById("question");
var testanswers = document.getElementById("answer");
var comment = document.getElementById("msg");
var saveButton = document.getElementById("save");
var savedAnswer = document.getElementById("savedAnswer");
function saveLastAnswer() {
var testResult = {
testquestions: questions.value,
testanswers: answers.value,
comment: comment.value.trim()
};
// setItem to store oject in storage and JSON.stringfy to convert it as a string.//
localStorage.setItem("testResult",JSON.stringify(testResult));
}
function renderLastAnswer () {
//Use JSON.parse to covert text to Javascript object
var lastAnswer = JSON.parse(localStorage.getItem("testResult"));
//Check if data returned is correct or in correct//
if (lastAnswer !== null){
document.getElementById("savedAnswer"). innerHTML = lastAnswer.answer;
} else {
return;
}
}
saveButton.addEventListener("click", function(event){
event.preventDefault();
saveLastAnswer();
renderLastAnswer();
});
//Init function //
function init () {
renderLastAnswer();
}
init ();
HTML -
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css"/>
<script src="./main.js"></script>
</head>
<body>
<div class="countdwnclock">Seconds left:<span id ="time-left"> 60</span></div>
<div class="container"></div>
<!--Questions 1-->
var = question1
<div class="copy">"Commonly used data types DO NOT include:"</div>
<ul class="answers" id="question1">
<input type = "radio" name="q1" value = "a" id="q1a">1.strings</label>
</ul>
<ul>
<input type = "radio" name="q1" value = "b" id="q1b">2.booleans</label>
</ul>
<ul>
<input type = "radio" name="q1" value = "c" id="q1c">2.booleans</label>
</ul>
<ul>
<input type = "radio" name="q1" value = "d" id="q1d">3.alerts</label>
</ul>
<!--Quesions 2-->
<div class="container"></div>
<div class="copy">The condition in an if/else statement is enclosed within____.</div>
<ul class="answers" id="question2">
<input type="radio" name="q2" value="a" id="q2a">1.quotes</label>
</ul>
<ul>
<input type="radio" name="q2" value="b" id="q2b">2.curly brackets</label>
</ul>
<ul>
<input type="radio" name="q2" value="a" id="q2c">3.parenthesis</label>
</ul>
<ul>
<input type="radio" name="q2" value="c" id="q2d">4.square brackets</label>
</ul>
<!--Question 3-->
<div class="container"></div>
<div class="copy">Arrays in Javascript can be used to store____.</div>
<ul class="answers" id="question3">
<input type="radio" name="q3" value="a" id="q3a">1.numbers & strings</label>
</ul>
<ul>
<input type="radio" name="q3" value="b" id="q3b">2.other arrays</label>
</ul>
<ul>
<input type="radio" name="q3" value="a" id="q3c">3.booleans</label>
</ul>
<ul>
<input type="radio" name="q3" value="c" id="q3d">4.all the above</label>
</ul>
<!--Question 4-->
<div class="container"></div>
<div class="copy">String values must be enclosed within______when being assigned to variables.</div>
<ul class="answers" id="question4">
<input type="radio" name="q4" value="a" id="q4a">1.commas</label>
</ul>
<ul>
<input type="radio" name="q4" value="b" id="q4b">2.curly brackets</label>
</ul>
<ul>
<input type="radio" name="q4" value="a" id="q4c">3.quotes</label>
</ul>
<ul>
<input type="radio" name="q4" value="c" id="q4d">4.parenthesis</label>
</ul>
<!--Question 5-->
<div class="container"></div>
<div class="copy">A very useful tool used during development and debugging for printing content to the debugger is____.</div>
<ul class="answers" id="question4">
<input type="radio" name="q5" value="a" id="q5a">1.Javascript</label>
</ul>
<ul>
<input type="radio" name="q5" value="b" id="q5b">2.terminal/bash</label>
</ul>
<ul>
<input type="radio" name="q5" value="a" id="q5c">3.for loops</label>
</ul>
<ul>
<input type="radio" name="q5" value="c" id="q5d">4.console log</label>
</ul>
</body>
</html>
/**** CSS STYLES ***/
.text{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: x-large;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 100px;
text-align: center;
color: black;
}
.copy {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
position: relative;
color: black;
text-align: center;
font-weight: bold;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.container {
height: 200px;
position: relative;
border: none;
}
/****Questions****/
.questions{
margin: 5px;
font-size: 18px;
cursor: pointer;
text-decoration: none;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin-right: 200px;
margin-left: 200px;
}
/***Buttons***/
.button:hover {background-color: purple;
transform: scale(1.1);
}
.button:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.start{
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
position: relative;
text-decoration: none;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: purple;}
.button:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/***Unordered lists***/
ul{
list-style-type: none;
margin-left: 40%;
padding: 5px 5px;
font-size: 24px;
cursor: pointer;
position: relative;
text-decoration: none;
outline: none;
color: #fff;
background-color: purple;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
width: 200px;
}
input{
visibility: hidden;
}
.wrapper{
height: 200px;
position: relative;
border: none;
}
.countdwnclock{
position: absolute;
left: 1000px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
I am trying to implement a filter. When a checkbox is checked, and after submitting, the checked values should display in the div with a Clear all button and an X button to remove separately, as shown in the image.
Can anybody help me.
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
/******************************************/
$(function() {
$('input[type="checkbox"]').click(
function() {
// if($(this).is(":checked")){
// $("#div ul").append("<li> value <a href='javascript:void(0);' class='remove'>×</a></li>");
// }
value = $(this).val();
if ($(this).is(':checked')) {
$('<li></li>').appendTo('#div ol').text($(this).val());
} else {
value = $(this).val();
if ($('#div ol').has('li:contains("' + value + '")')) {
$('#div ol li:contains("' + value + '")').remove();
}
}
});
});
/******************************************/
/******************************************/
.filter-section .container {
margin-right: 100px;
margin-left: 100px;
padding: 0px;
height: 24px;
}
.filter-section #showmenu {
margin: 0px;
margin-right: 34px;
}
.filter-section #showmenu p {
color: #3f3f3f;
font-size: 18px;
font-weight: 600px;
margin: 0px;
padding: 0px;
}
.filter-section .menu .nav {
border-left: 1px solid #3f3f3f;
}
.filter-section .nav {
display: block;
margin: 0;
padding: 0;
height: 24px;
}
.filter-section .nav li {
display: inline-block;
list-style: none;
}
.filter-section .menu .nav .button-dropdown {
position: relative;
margin-left: 24px;
height: 24px;
}
.filter-section .menu .nav li a {
color: #000;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.filter-section .menu .nav li a span {
font-size: 26px;
line-height: 0;
height: 24px;
margin-right: 10px;
}
.filter-section .menu .nav li .dropdown-toggle::after {
display: inline-block;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 0px;
margin-left: 22px;
text-align: left;
width: 224px;
padding: 10px 24px;
}
.filter-section .menu .nav li .dropdown-menu div {
border-bottom: 1px solid #000;
}
.filter-section .menu .nav li .dropdown-menu div:last-child {
border-bottom: none;
padding-bottom: 10px;
padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu.active {
display: block;
}
/*.nav li .dropdown-menu a {
width: 150px;
}*/
/****************************************/
.listofslect {
padding: 0px;
}
.listofslect li {
padding: 10px;
font-size: 14px;
display: inline-block;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.name {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 0;
padding-bottom: 14px;
padding-top: 10px;
}
.name input {
margin-right: 12px;
}
.button {
border: none;
color: white;
padding: 14px 0px;
text-align: center;
font-size: 16px;
width: 100%;
cursor: pointer;
border-radius: 4px;
background-color: #000000;
}
button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="filter-section">
<div class="container d-flex">
<div id="showmenu">
<p> <img src="images/hamburger-icon-open.png"> Filter</p>
</div>
<div class="menu" style="display: none;">
<ul class="nav">
<li class="button-dropdown">
<span>•</span>Learning Modes
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Self paced"/>Self paced</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Classroom"/>Classroom</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Live Virtual-Classroom"/>Live Virtual Classroom</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Level
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="ABC"/>ABC</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="DEF"/>DEF</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="GHI"/>GHI</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Role
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="JKL"/>JKL</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="MNO"/>MNO</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="PQR"/>PQR</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Skills
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="STU"/>STU</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="VWX"/>VWX</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="YZ"/>YZ</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container" id="div">
<ol class="listofslect"></ol>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
The jsFiddle and Codepen code is attached.
I found a way to fix this issue thanks to this link, that explains how to get the checkbox values. This solution works with an array, So to fix your issue, you need below code to print every element checked on the submit event.
var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
values.push($(this).val());
});
I have got the solution.
Please go through the code for reference. View in full page.
the codepen and jsfiddle snippets
// Onclick Filter Slide Right Script Starts
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
// Onclick Filter Slide Right Script Ends
// Onclick Dropdown Script Starts Starts
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
// Onclick Dropdown Script Starts Ends
// Onclick Checkbox Display in div and Vice-Varsa Script Starts
// $(':checkbox').on('change', function() {
// var $this = $(this);
// if (this.checked) {
// $('#results')
// .append('<li class="">' + $this.val() + ' <img src="images/close-button.png"> </li>');
// } else {
// removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
// }
// });
// $(document).on('click', '.item', function() {
// removeCheckedResult($(this));
// });
// function removeCheckedResult($child) {
// $child.parent().remove();
// $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
// }
$(function() {
$(document).on('click', '.item', function() {
removeCheckedResult($(this));
});
function removeCheckedResult($child) {
$child.parent().remove();
$('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
$("button").on("click", function(e){
var arr =[];
var arr1 =[];
$("#results").html('');
e.preventDefault();
var count = document.querySelectorAll("input:checked")
for (i = 0; i < count.length; i++) {
arr.push(count[i].value);
arr1.push(count[i].getAttribute("data-ref"));
}
for (j = 0; j < arr.length; j++) {
$("#results").append('<li>'+arr[j]+'<img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></li>')
}
})
})
// Onclick Checkbox Display in div and Vice-Varsa Script Ends
$(document).ready(function() {
$('#show-hidden-menu, #show-hidden-menu1, #show-hidden-menu2, #show-hidden-menu3').click(function() {
$('.hidden-menu').show("slow");
// Alternative animation for example
// slideToggle("fast");
});
});
$(document).ready(function(){
$(".mode-apply-btn").click(function(){
$(".mode-sec span").css("color", "#26d400");
});
$(".level-apply-btn").click(function(){
$(".level-sec span").css("color", "#26d400");
});
$(".role-apply-btn").click(function(){
$(".role-sec span").css("color", "#26d400");
});
$(".skills-apply-btn").click(function(){
$(".skills-sec span").css("color", "#26d400");
});
$(".button").click(function(){
$(".clear-all").css("display", "inline-block");
});
});
$(".dropdown-menu input:checkbox").on("change", function() {
var len = $(".dropdown-menu input[type='checkbox']:checked").length;
if(len>0)
{
$("#general .counter").text('('+len+')');
}
else
{
$("#general .counter").text(' ');
}
});
$('#filter-submenu').find('.clear-all').prependTo('.hidden-menu>li:last');
// $('.hidden-menu > .clear-all').prepend("");
$('.clear-all').on('click', function () {
$('#filter-submenu').empty();
$('.menu .dropdown-menu div input').prop('checked', false);
$(".mode-sec span").css("color", "#fff");
$(".level-sec span").css("color", "#fff");
$(".skills-sec span").css("color", "#fff");
$(".role-sec span").css("color", "#fff");
});
.filter-section {
margin-top: 40px;
margin-bottom: 40px;
}
.filter-section .container {
margin-right: 100px;
margin-left: 100px;
padding: 0px;
}
.filter-section #showmenu {
margin: 0px;
margin-right: 34px;
margin-bottom: 25px;
}
.filter-section #showmenu a {
color: #3f3f3f;
width: 102px;
font-size: 18px;
font-weight: 600;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.filter-section #showmenu a img{
width:35px
}
.filter-section .menu {
margin-bottom: 25px;
display: none;
}
.filter-section .menu .nav {
border-left: 1px solid #3f3f3f;
}
.filter-section .nav {
display: block;
margin: 0;
padding: 0;
height: 24px;
}
.filter-section .nav li {
display: inline-block;
list-style: none;
}
.filter-section .menu .nav .button-dropdown {
position: relative;
margin-left: 24px;
height: 24px;
}
.filter-section .menu .nav li a {
color: #000;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.filter-section .menu .nav li a span {
font-size: 26px;
line-height: 0;
height: 24px;
margin-right: 10px;
color: #fff;
}
.filter-section .menu .nav li .dropdown-toggle::after {
display: inline-block;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu .dropdown-toggle::after {
display: none;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 10px;
margin-left: 22px;
text-align: left;
width: 224px;
padding: 10px 24px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
.filter-section .menu .nav li .dropdown-menu div {
border-bottom: 1px solid #000;
padding: 12px 0px;
}
.filter-section .menu .nav li .dropdown-menu div:nth-last-child(2) {
border-bottom: none;
}
.filter-section .menu .nav li .dropdown-menu div:last-child {
border-bottom: none;
padding-bottom: 10px;
padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu div label {
margin-bottom: 0px;
line-height: 0px;
}
.filter-section .menu .nav li .dropdown-menu.active {
display: block;
}
.hidden-menu {
display: none;
}
/****************************************/
.listofslect {
padding: 0px;
}
.listofslect li {
padding: 10px;
font-size: 14px;
display: inline-block;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.name {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 0;
padding-bottom: 14px;
padding-top: 10px;
}
.name input {
margin-right: 12px;
}
.button {
border: none;
color: white;
padding: 14px 0px;
text-align: center;
font-size: 16px;
width: 100%;
cursor: pointer;
border-radius: 4px;
background-color: #000000;
}
button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
/**********************************************/
.filter-section #results{
display: none;
}
.filter-section .hidden-menu {
list-style: none;
display: inline-block;
padding: 0px;
margin: 0px;
margin-bottom: 25px;
}
.filter-section .hidden-menu li {
padding: 16px 15px;
margin: 0px;
line-height: 0px;
margin-right: 16px;
margin-bottom: 16px;
float:left;
border-radius: 4px;
border: solid 1px #ECECEC;
background-color: #ECECEC;
}
.filter-section .hidden-menu li a img {
margin-left: 15px;
width: 10px;
}
.filter-section .clear-all{
padding: 8px 0px;
border: none;
background: #fff;
display:none;
}
.filter-section .clear-all a{
color: #26d400;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
/****************************/
/* Hide the browser's default checkbox */
/*label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}*/
/*label input{
margin-right: 12px;
}*/
/* Create a custom checkbox */
/*.checkmark {
position: absolute;
top: 15px;
left: 23px;
height: 13px;
width: 13px;
background-color: #fff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
border: 1px solid;
border-radius: 0px;
}*/
/* On mouse-over, add a grey background color */
/*label:hover input ~ .checkmark {
background-color: #fff;
}*/
/* When the checkbox is checked, add a blue background */
/*label input:checked ~ .checkmark {
background-color: #000;
}
*/
/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
content: "";
position: absolute;
display: none;
}*/
/* Show the checkmark when checked */
/*label input:checked ~ .checkmark:after {
display: block;
}*/
/* Style the checkmark/indicator */
/*label .checkmark:after {
left: 4px;
top: 0px;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}*/
.nav .button-dropdown .dropdown-menu label
{
display:block
}
.nav .button-dropdown .dropdown-menu input[type="checkbox"]
{
position:relative;
top:0px;
margin-right:12px;
-moz-appearance:none;
background-color:#dddddd!important;
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:after
{
content:"";
vertical-align:middle;
-webkit-appearance:none!important;
-moz-appearance:none!important;
appearance:none!important;
background-color:#fff!important;
border: 1px solid #000;
color:#fff;
text-align:center;
line-height:15px;
position:absolute;
cursor:pointer;
height:15px;
width:15px;
left:0;top:0;
font-size:11px;
background:#fff
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:checked:after
{
background:#000;
/*content:'\f00c';*/
content: url(images/left-arrow-icon.png);
color:#000;
-webkit-appearance:none!important;
-moz-appearance:none!important;
background-color:#000!important;
color:#fff;
font-family:FontAwesome
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="filter-section">
<div class="container d-flex">
<div id="showmenu">
<a id="general"> <img src="https://i.dlpng.com/static/png/5460626-filter-filtering-filters-icon-with-png-and-vector-format-for-filter-png-512_512_preview.png"> Filter <span class="counter"></span></a>
</div>
<div class="menu">
<ul class="nav">
<li class="button-dropdown">
<span>•</span>Learning Modes
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test" data-ref="1">test<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle mode-apply-btn" id="show-hidden-menu">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Level
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle level-apply-btn" id="show-hidden-menu1">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Role
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test14" data-ref="14">test14<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test15" data-ref="15">test15<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test16" data-ref="16">test16<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test17" data-ref="17">test17<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test18" data-ref="18">test18<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle role-apply-btn" id="show-hidden-menu2">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Skills
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test19" data-ref="19">test19<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test20" data-ref="20">test20<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test21" data-ref="21">test21<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test22" data-ref="22">test22<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test23" data-ref="23">test23<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test24" data-ref="24">test24<span class="checkmark"></span></label>
</div>
<div class="" >
<button class="button dropdown-toggle skills-apply-btn" id="show-hidden-menu3">Apply</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container d-flex" id="filter-submenu">
<ul class="hidden-menu clearfix" id="results">
</ul>
<a id="clear-all-btn" class="col-1 clear-all">Clear all</a>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I have developed a quiz form wherein form before question both bullets and numbers are coming. I want to remove one of this (either bullets or number).
Please see this image
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>
please help how to solve this.
You add list-style: none; to your ul tag
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ul {
list-style: none;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>
Either remove jQuery code
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
OR add style
#quiz ul li{
list-style:none;
}
Here is the updated code:
* {
margin: 0;
padding: 0;
}
#quiz ul li {
list-style: none;
}
.floatleft {
float: left !important;
}
.floatright {
float: right !important;
}
.floatnone {
float: none !important;
}
.alignleft {
text-align: left !important;
}
.alignright {
text-align: right !important;
}
.aligncenter {
text-align: center !important;
}
.no-display {
display: none;
}
.no-margin {
margin: 0 !important;
}
.no-padding {
padding: 0 !important;
}
a:focus,
button:focus {
outline: 0px solid
}
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: top;
}
.fix {
overflow: hidden
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 10px;
color: #000;
}
a {
transition: all 0.3s ease 0s;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active,
a:hover,
a:focus {
outline: 0 none;
text-decoration: none
}
.clear {
clear: both
}
#wrapper {
height: 100%;
width: 100%;
}
body {
color: #000;
height: 100%;
width: 100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x: hidden;
}
#header {
width: 100%;
height: 100px;
}
#logo {
clear: both;
margin: 20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px;
margin: 0 0 1px 0;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
#quiz label {
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
#results {
font: 44px Georgia, Serif;
}
center {
font-size: xx-large;
padding: 20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover {
background-color: #DBDBDB;
color: #000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer {
width: 100%;
height: 80px;
background-color: #2D2D2D;
color: #9C9C9C;
position: absolute;
clear: both;
margin-top: 2%;
}
#footer #footer-center {
font-size: 18px;
margin: auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear: both;
padding: 20px 0 0 0;
}
.survey-form {
width: 100%;
min-height: 500px
}
li {
padding-bottom: 20px;
margin-left: 0px;
padding-left: 0px;
}
ul {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<link rel="stylesheet" type="text/css" href="CSS/responsive.css" />
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<a href="index.html" class="standard-logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</a>
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No</label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No</label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center">Copyright © 2016 Secqureone,Inc. All rights reserved</center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for (i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if (currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>
I have nested checkboxes on my page and if I click parent checkbox child checkbox being checked it's okey so far.but if I click child checkbox I want parent click has to be unchecked how to do ?
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li>
<input type="checkbox" id="input1"><label for="input1">kategori 1</label>
<ul>
<li><input type="checkbox" id="input11"><label for="input11">kategori 11</label></li>
<li><input type="checkbox" id="input12"><label for="input12">kategori 12</label></li>
<li><input type="checkbox" id="input13"><label for="input13">kategori 13</label></li>
</ul>
</li>
<li><input type="checkbox" id="input2"><label for="input2">kategori 2</label></li>
<li>
<input type="checkbox" id="input3"><label for="input3">kategori 3</label>
<ul>
<li><input type="checkbox" id="input31"><label for="input31">kategori 31</label></li>
<li><input type="checkbox" id="input32"><label for="input32">kategori 32</label></li>
<li>
<input type="checkbox" id="input33"><label for="input33">kategori 33</label>
<ul>
<li><input type="checkbox" id="input331"><label for="input331">kategori 331</label></li>
<li><input type="checkbox" id="input332"><label for="input332">kategori 332</label></li>
<li><input type="checkbox" id="input333"><label for="input333">kategori 333</label></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--new-checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
jquery
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("click", function() {
if ($(this).is(':checked')) {
// check all children
$(this).parent().find('li input[type=checkbox]').prop('checked', true);
// check all parents
$(this).parent().prev().prop('checked', true);
} else {
// uncheck all children
$(this).parent().find('li input[type=checkbox]').prop('checked', false);
}
});
});
on codepen
Add a new check to find if checked element has parent then check if all the children are clicked. Also it will be preferable to use change event.
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var $close = $(this).closest('ul').closest('li');
if ($(this).is(':checked')) {
// check all children
$(this).parent().find('li input[type=checkbox]').prop('checked', true);
// check all parents
$(this).parent().prev().prop('checked', true);
} else {
// uncheck all children
$(this).parent().find('li input[type=checkbox]').prop('checked', false);
}
while ($close.length) {
$che = $close.find('ul input:checkbox');
$checked = $close.find('ul input:checkbox:checked');
$close.children('input').prop('checked', $che.length == $checked.length);
$close = $($close.children('input')).closest('ul').closest('li');
console.log($che.length, $checked.length);
}
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script>
<div class="new-checkbox">
<ul>
<li>
<input type="checkbox" id="input1">
<label for="input1">kategori 1</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori 11</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori 12</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori 13</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori 2</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori 3</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori 31</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori 32</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori 33</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori 331</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori 332</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori 333</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Hi friends I am a beginner (junior) front end
and I want to learn something to do.
my question is how to do accordion checkboxes but for my nested checkboxes
this is the demo click to see demo
and this id my demo that I do
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li><input type="checkbox" id="input1"><label for="input1">kategori <strong>(1)</strong></label>
<ul>
<li><input type="checkbox" id="input11"><label for="input11">kategori<strong>(11)</strong></label></li>
<li><input type="checkbox" id="input12"><label for="input12">kategori <strong>(12)</strong></label></li>
<li><input type="checkbox" id="input13"><label for="input13">kategori <strong>(13)</strong></label></li>
</ul>
</li>
<li><input type="checkbox" id="input2"><label for="input2">kategori <strong>(2)</strong></label></li>
<li><input type="checkbox" id="input3"><label for="input3">kategori <strong>(3)</strong></label>
<ul>
<li><input type="checkbox" id="input31"><label for="input31">kategori <strong>(31)</strong></label></li>
<li><input type="checkbox" id="input32"><label for="input32">kategori <strong>(32)</strong></label></li>
<li><input type="checkbox" id="input33"><label for="input33">kategori <strong>(33)</strong></label>
<ul>
<li><input type="checkbox" id="input331"><label for="input331">kategori <strong>(331)</strong></label></li>
<li><input type="checkbox" id="input332"><label for="input332">kategori <strong>(332)</strong></label></li>
<li><input type="checkbox" id="input333"><label for="input333">kategori <strong>(333)</strong></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!--new-checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul{
padding:0;
margin:0;
list-style:none;
margin-left: 30px;
font: normal 11px/16px "Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child{
margin-left: 0;
}
.new-checkbox ul li {margin: 3px 0;}
.new-checkbox input[type="checkbox"] {
display:none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding:0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor:pointer;
}
.new-checkbox input[type="checkbox"]
{
display: none;
}
.new-checkbox li
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before
{
content: "\25bc";
}
.new-checkbox input[type="checkbox"][id]:not(:checked) ~ ul
{
display: none;
}
js
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var $close = $(this).closest('ul').closest('li');
if ($(this).is(':checked')) {
// check all children
$(this).parent().find('li input[type=checkbox]').prop('checked', true);
// check all parents
$(this).parent().prev().prop('checked', true);
} else {
// uncheck all children
$(this).parent().find('li input[type=checkbox]').prop('checked', false);
}
while ($close.length) {
$che = $close.find('ul input:checkbox');
$checked = $close.find('ul input:checkbox:checked');
$close.children('input').prop('checked', $che.length == $checked.length);
$close = $($close.children('input')).closest('ul').closest('li');
console.log($che.length, $checked.length);
}
});
});
see on codepen
You can use a parentsUntil() to iterate over each parent element and then see whether it has a checked checkbox like
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
$(this).parent().find('input[type=checkbox]').prop('checked', this.checked);
if (!this.checked) {
$(this).parentsUntil('.new-checkbox > ul', 'li').children('input[type=checkbox]').prop('checked', function() {
return $(this).siblings('ul').find('input[type=checkbox]').is(':checked')
})
}
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox input[type="checkbox"][id]:not(:checked) ~ ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-checkbox">
<ul>
<li>
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--new-checkbox-->