Develop Reference

How to hide/ unhide choices based upon a choice selected in the same question

I am currently making use of the following code which helps me in hiding and displaying the choices. But I am unable to hide and unselect them if choice 1 is unchecked.
var x= jQuery("#"+this.questionId+" input[choiceid=2]").closest("li").hide();
var y = jQuery("#"+this.questionId+" input[choiceid=3]").closest("li").hide();
this.questionclick = function(event, element) {
var selectedChoice = this.getSelectedChoices()
console.log(selectedChoice) //use this to get the value of the choice when you want the textbox to appear
if (selectedChoice == "1") {
x.show();
y.show();
alert(selectedChoice);
}
else if (selectedChoice == "2") {
//x.hide();
//y.hide();
alert(selectedChoice+"Else if");
}
else{
x.hide();
y.hide();
alert(selectedChoice+"Else ");
}
}
Some help would be greatly appreciated

Your question does not contain html that you are using. Here is a small demo I have created to demonstrate the grouped checkboxes and binding on click event with them. Play and do changes as per your need.
https://stackblitz.com/edit/grouped-checkboxes-binding-onclick-function
this keyword inside the function refers to the checkbox clicked. you can further checks as you do on normal html checkbox element. e.g this.checkedmeans document.getElementById("myCheck").checked to check if checkbox is checked or not.
HTML
<div class="question">
<h2 class="q-1">Click to write the Question text</h2>
</div>
<ul class="options-list" id="options-list">
<li>
<label>
<input type="checkbox" id="q1-opt1" name="q1['opt1']">
Click to write choice 1
</label>
</li>
<li>
<label>
<input type="checkbox" id="q1-opt2" name="q1['opt2']">
Click to write choice 2
</label>
</li>
<li>
<label>
<input type="checkbox" id="q1-opt3" name="q1['opt3']">
Click to write choice 3
</label>
</li>
<li>
<label>
<input type="checkbox" id="q1-opt4" name="q1['opt4']">
Click to write choice 4
</label>
</li>
</ul>
CSS
.options-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.options-list li label {
display: block;
background: #ddd;
border-radius: 8px;
padding: 10px 20px;
margin: 0 0 10px;
cursor: pointer;
}
.options-list li label:hover {
background: #ccc;
}
.options-list li label > input {
display: none;
}
JS
(function() {
// get questions that you want to disable enable
var q1opt1 = document.getElementById("q1-opt2");
var q1opt2 = document.getElementById("q1-opt3");
// get list wrapping element of all checkboxes
var el = document.getElementById('options-list');
// get all checkboxes inside wrapping element
var options = el.getElementsByTagName('input');
// assign a function each checkbox on click
for( var i=0, len=options.length; i<len; i++ ) {
if ( options[i].type === 'checkbox' ) {
options[i].onclick = function(e) {
// if checkbox id is q1-opt1
// and is checked is checking if this is selected.
// checkbox is hidden with css
// play with the code
if ( this.id == 'q1-opt1' && this.checked ) {
q1opt1.parentElement.style.display = "none";
q1opt2.parentElement.style.display = "none";
} else {
q1opt1.parentElement.style.display = "block";
q1opt2.parentElement.style.display = "block";
}
}
}
}
})();

Jquery custom function issues

I'm trying to grab the article elements id value for all the article elements one by one so I can add it to the
countCharacters() function so I can have a unique character count for each textarea but both my jquery functions dont seem to work correctly. For example my character count should look something like this.
countCharacters('#comment-1535 .review-info', '#comment-1535 .review-info + div .count', 5000);
countCharacters('#comment-553 .review-info', '#comment-553 .review-info + div .count', 5000);
countCharacters('#comment-6547 .review-info', '#comment-6547 .review-info + div .count', 5000);
Here is my JSFiddle https://jsfiddle.net/jm52wg9k/
HTML
<article class="review" id="comment-1535">
<div class="review-details">
<div class="review-stats">
<!-- content -->
</div>
<form method="post" action="" class="review-form">
<fieldset>
<ol>
<li><label for="review-info">Review Info:</label></li>
<li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
</ol>
</fieldset>
<fieldset>
<ol>
<li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
</ol>
</fieldset>
</form>
</div>
</article>
<article class="review" id="comment-553">
<div class="review-details">
<div class="review-stats">
<!-- content -->
</div>
<form method="post" action="" class="review-form">
<fieldset>
<ol>
<li><label for="review-info">Review Info:</label></li>
<li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
</ol>
</fieldset>
<fieldset>
<ol>
<li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
</ol>
</fieldset>
</form>
</div>
</article>
<article class="review" id="comment-6547">
<div class="review-details">
<div class="review-stats">
<!-- content -->
</div>
<form method="post" action="" class="review-form">
<fieldset>
<ol>
<li><label for="review-info">Review Info:</label></li>
<li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
</ol>
</fieldset>
<fieldset>
<ol>
<li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
</ol>
</fieldset>
</form>
</div>
</article>
Jquery
$(document).ready(function() {
function countCharacters( input, output, max ) {
var $input = $(input);
var $output = $(output);
$output.text(max + ' characters left');
$input
.keydown(function(event) {
if (event.keyCode != 8 &&
event.keyCode != 46 &&
$input.val().length >= max)
event.preventDefault();
})
.keyup(function() {
var val = $input.val().slice(0, max);
var left = max - val.length;
$input.val(val);
$output.text(left + ' characters left');
});
}
countCharacters(reviewInfo() + '.review-info', reviewInfo() + '.review-info + div .count', 5000);
});
$(document).ready(function(){
function reviewInfo(){
var review = $('.review-info').closest('article').attr('id');
var review2 = '#' + review;
return review2;
};
});
CSS
*{
border: 0;
margin: 0;
padding: 0;
}
article{
margin-top: 1em;
}
textarea{
width: 90%;
}
input{
margin: 1em 0;
color: #fff;
background: green;
padding: .5em;
}

DEMO
Your code was fine but the way you were implementing it wasn't proper. Below changes I have made to your code.. See inline comments for more details
function countCharacters(input, output, max,event) {
//Only changes here is I removed .keyup and .keydown which I've binded outside
var $input = $(input);
var $output = $(output);
if (event.keyCode != 8 && event.keyCode != 46 &&
$input.val().length >= max)
event.preventDefault();
var val = $input.val().slice(0, max);
var left = max - val.length;
$input.val(val);
$output.text(left + ' characters left');
}
$(".review-info").on('keyup keypress',function(event){
var _this=$(this);//key up and key press out side document.ready
var _thisCount=_this.next('.some').find('.count');
//find the span using current control's next .some div and its child .count
var max=5000; //also you can add as an data-* attribute to your controls
countCharacters(_this,_thisCount,max,event);//call the function with necessary params
})

How to dynamically set the colour of a 'div' element to match that of the colour picked on a colour widget using for loop?

I have this html code that includes a colour widget picker, the background of the entire page will change according to which pre-defined choice the user clicks on. I have got that working but I would like to highlight the box around the colour choice once it has been clicked to differentiate from the other unselected choices.
<html>
<head>
<meta charset="utf8" />
<title></title>
<script>
function changeColor(e) {
document.getElementById("page").className = e;
var i;
var x = document.getElementById("page");
for (i = 0; i < 5; i++)
if (document.getElementById("page").className = e ){
x.getElementsByTagName("li")[i].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="page" class=""><!-- start page wrapper -->
<hr />
<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="midnight" onClick="changeColor('midnight')">Midnight</li>
<li class="matrix" onclick="changeColor('matrix')">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop')">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight')">Skylight</li>
<li class="sunset" onclick="changeColor('sunset')">Sunset</li>
</ul>
<div class="clearfix"></div>
<hr />
</div><!-- /page -->
</body>
</html>

Here's how I would do this (of course change the classes as needed):
$('.changeColor').click(function(){
var $this=$(this);
var color=$this.data('color');
$('#page').removeClass('midnight matrix peardrop skylight sunset').addClass(color);
$('.changeColor').removeClass('highlight'); // jquery actually implements a loop here it's just internal...
$this.addClass('highlight');
});
/*
// Methods with a explicit loop per your comment
$('.changeColor').click(function(){
var $this=$(this);
var $page=$('#page');
var color=$this.data('color');
$page.removeClass('midnight matrix peardrop skylight sunset').addClass(color);
$page.find('li').each(function(){ // jQuery loop....not really neccisary though...
$(this).removeClass('highlight');
});
$this.addClass('highlight');
});
$('.changeColor').click(function(){
var $this=$(this);
var $page=$('#page');
var color=$this.data('color');
$page.removeClass('midnight matrix peardrop skylight sunset').addClass(color);
var lis = $page.find('li');
for(var i =0; i< lis.length; i++){ // js loop....again not really neccisary though...
$(lis[i]).removeClass('highlight');
}
$this.addClass('highlight');
});
*/
body {
margin: 10px;
}
.midnight{
background-color:black;
color:white;
}
.matrix{
background-color:purple;
}
.peardrop{
background-color:grey;
}
.skylight{
background-color:blue;
}
.sunset{
background-color:pink;
}
.highlight{
background-color:yellow;
outline: 1px solid #red;
color:black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page" class=""><!-- start page wrapper -->
<hr />
<div id="theme-picker">
<h2>Theme Picker</h2>
<p>Select a theme from the options below:</p>
<div id="palette">
<ul>
<li class="changeColor" data-color="midnight">Midnight</li>
<li class="changeColor" data-color="matrix">Matrix</li>
<li class="changeColor" data-color="peardrop">Peardrop</li>
<li class="changeColor" data-color="skylight">Skylight</li>
<li class="changeColor" data-color="sunset">Sunset</li>
</ul>
<div class="clearfix"></div>
<hr />
</div>

You could pass the object everytime you call the function, and then change that object color. Something like this:
...
<script>
function changeColor(className,object) {
document.getElementById("page").className = className;
var siblings = object.parentElement.getElementsByTagName('li');
for(var sibling in siblings){
if(siblings[sibling].className){
siblings[sibling].className = siblings[sibling].className.split(' ')[0];
}
}
object.className = object.className+' selected';
}
</script>
...
<li class="midnight" onClick="changeColor('midnight',this)">Midnight</li>
<li class="matrix" onclick="changeColor('matrix',this)">Matrix</li>
<li class="peardrop" onclick="changeColor('peardrop',this)">Peardrop</li>
<li class="skylight" onclick="changeColor('skylight',this)">Skylight</li>
<li class="sunset" onclick="changeColor('sunset',this)">Sunset</li>
...
Edited, since I was missing the point of resetting the selection. You could just create a selected class with whatever you need and your done

How to use multiple checkboxes to return a single div

I am working on a page with multiple checkboxes, and would like it to return a single div based on any combination of checks. I created a jsfiddle, but even though this is the code on my site that somewhat works, it is not working on jsfiddle:
HTML:
<div id="checkboxes">
<input type="checkbox" id="red" name="color">Red
<input type="checkbox" id="blue" name="color">Blue
<input type="checkbox" id="green" name="color">Green
</div>
<br /><br />
<div id="default" style="display:none;">Show this by default</div><br />
<div id="showred" style="display:none;">This is red</div><br />
<div id="showblue" style="display:none;">This is blue</div><br />
<div id="showgreen" style="display:none;">This is green</div><br />
<div id="showpurple" style="display:none;">This is purple</div>
JS:
$(document).ready(function() {
var r = $('#red');
var b = $('#blue');
var g = $('#green');
var p = r.add(b);
$(r).click(function(){
if ($(r).is(':not(:checked)')) {
$('#showred').show();
$('#showblue').hide();
$('#showgreen').hide();
$('#showpurple').hide();
$('#default').hide();
} else {
$('#showred').hide();
$('#showblue').hide();
$('#showgreen').hide();
$('#showpurple').hide();
$('#default').show();
}
});
$(b).click(function(){
if ($(b).is(':not(:checked)')) {
$('#showred').hide();
$('#showblue').show();
$('#showgreen').hide();
$('#showpurple').hide();
$('#default').hide();
} else {
$('#showred').hide();
$('#showblue').hide();
$('#showgreen').hide();
$('#showpurple').hide();
$('#default').show();
}
});
$(g).click(function(){
if ($(g).is(':not(:checked)')) {
$('#showred').hide();
$('#showblue').hide();
$('#showgreen').show();
$('#showpurple').hide();
$('#default').hide();
} else {
$('#showred').hide();
$('#showblue').hide();
$('#showgreen').hide();
$('#showpurple').hide();
$('#default').show();
}
});
$(p).click(function(){
if ($(r).is(':not(:checked)') && $(b).is(':not(:checked)')) {
$('#showred').hide();
$('#showblue').hide();
$('#showgreen').hide();
$('#showpurple').show();
$('#default').hide();
} else {
$('#showred').hide();
$('#showblue').hide();
$('#showgreen').hide();
$('#showpurple').hide();
$('#default').show();
}
});
});
http://jsfiddle.net/robert316/tu0o1z0s/13/
I would really appreciate any help to get this working correctly, what I would like to happen is:
User clicks "Red" -> Display red div
User clicks "Blue" -> Display blue div
User clicks "Red" and "Blue" -> Only display purple div (no red or blue)
I would also like to fix the behavior that when a user unchecks a box it reverts back to the default div display, ideally, if no boxes are selected it should show default div, and always display the div based on the combination of checkboxes.
Thank you very much for any help with this.

In case anyone finds this question, here is the final code I used to be able to show single divs from multiple checkbox selections:
Code Snippet:
$(document).ready(function () {
// select checkboxes by name
var packages = $("input[name='cc']");
// set main div id
var packageDiv = $("#listings");
// bind to change event
packages.change(function () {
// empty array
var idArr = [];
// get the checked values
var checked = $("input[name='cc']:checked");
// loop and build array
checked.each(function () {
idArr.push($(this).prop("id"));
});
// remove whitespace from multiple checkboxes array
var trimArray = idArr.join("");
toggleShowHide(trimArray, packageDiv);
});
});
function toggleShowHide(arr, elem) {
var arrLen = arr.length;
// clear last selection when unchecking boxes
$(".hide-me").hide();
// set default if array is empty
if (arrLen < 1 ){
setDefault(elem);
}
// run the show hide based on array of selection
for(i = 0; i < arrLen; i++) {
// set the name for the selected div
var temp = "#" + arr + "_div_id";
$(temp).show();
$("#default").hide();
}
// unhide
elem.show();
}
function setDefault(elem){
$("#default").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Checkbox -->
<input type="checkbox" id="i" name="cc" value="i_div_id" data-ref="i_div_id" />
<label>I</label>
<input type="checkbox" id="c" name="cc" value="c_div_id" data-ref="c_div_id" />
<label>C</label>
<input type="checkbox" id="p" name="cc" value="p_div_id" data-ref="p_div_id" />
<label>P</label>
<br />
<br />
<br />
<br />
<!-- Loaded/hidden content div-->
<div id="listings">
<div class="hide-me" id="default"><strong>This is default copy on page</strong></div>
<div class="hide-me" id="i_div_id" style="display:none;">You ordered: <strong>I Package</strong></div>
<div class="hide-me" id="c_div_id" style="display:none;">You ordered: <strong>C Package</strong></div>
<div class="hide-me" id="p_div_id" style="display:none;">You ordered: <strong>P Package</strong></div>
<div class="hide-me" id="ic_div_id" style="display:none;">You ordered: <strong>I-C Package</strong></div>
<div class="hide-me" id="ip_div_id" style="display:none;">You ordered: <strong>I-P Package</strong></div>
<div class="hide-me" id="cp_div_id" style="display:none;">You ordered: <strong>C-P Package</strong></div>
<div class="hide-me" id="icp_div_id" style="display:none;">You ordered: <strong>I-C-P Package</strong></div>
</div>

Rather than creating a color div for each color, why not use a single color-div and just change its css properties / classes? This would eliminate the need for extraneous show-hide / if-else logic when checkbox selections are made.
This snippet illustrates how you can "return a div based on any combination of checks" - it relies on css to handle setting the properties of a target div but you could very well handle all of this in jQuery as well.
Example:
$(document).ready(function() {
// checkboxes with name 'color', 'color-div', and reset button
var colors = $("input[name='color']");
var colorDiv = $("#color-div");
var reset = $("#reset");
// bind to 'colors' change event:
colors.change(function() {
// empty array to hold the color ids
var idArr = [];
// get the checked colors
var checked = $("input[name='color']:checked");
// loop and build array
checked.each(function() {
idArr.push($(this).prop("id"));
});
// function below
toggleColors(idArr, colorDiv);
});
// reset to defaults
$("#reset").click(function() {
// function below
setDefault(colorDiv);
// back to hidden
colorDiv.hide();
// uncheck the check boxes
$("input[name='color']:checked").removeAttr("checked");
});
});
/// function to add color css classes based on checkbox id array
function toggleColors(arr, elem) {
var arrLen = arr.length;
// set default if array is empty
if (arrLen < 1) {
setDefault(elem);
return;
};
// remove classes, add classes
elem.removeClass();
for (i = 0; i < arrLen; i++) {
elem.addClass(arr[i]);
}
// unhide
elem.show();
}
/// set the color div to "default"
function setDefault(elem) {
elem.removeClass();
elem.addClass("default");
}
/*
using css to handle color and content change!
this will prevent you from having to write complicated "if-else"
jQuery blocks.
*/
#color-div {
height: 100px;
width: 100px;
border: solid 2px #d3d3d3;
margin-bottom: 20px;
}
.default,
.default:after {
background-color: #fff;
content: "Please select a color";
}
.yellow,
.yellow:after {
background-color: yellow;
content: "I am Yellow!";
}
.red,
.red:after {
background-color: red;
content: "I am Red!";
}
.blue,
.blue:after {
background-color: blue;
content: "I am Blue!";
}
.yellow.blue,
.yellow.blue:after {
background-color: green;
content: "I am Green!";
}
.yellow.red,
.yellow.red:after {
background-color: orange;
content: "I am Orange!";
}
.blue.red,
.blue.red:after {
background-color: purple;
content: "I am Purple!";
}
.blue.red.yellow,
.blue.red.yellow:after {
background-color: brown;
content: "I am Brown :(";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="checkboxes">
<input type="checkbox" id="red" name="color" />
<label>Red</label>
<input type="checkbox" id="blue" name="color" />
<label>Blue</label>
<input type="checkbox" id="yellow" name="color" />
<label>Yellow</label>
</div>
<br />
<br />
<div id="color-div" style="display:none;"></div>
<button id="reset">Reset</button>
If css classes isn't your bag, you could essentially handle the same "toggling" through building an equivalent javascript object.
[Edit - Using a Div for Each Checkbox]
Since you have control over the properties of the checkboxes, you should use one of these properties to tie to the element being loaded by your query. You should also try to avoid using id for more than one element. For example if you have this:
<!-- Checkbox -->
<input type="checkbox" id="burgers" name="color" />
<!-- Loaded/hidden content div-->
<div id="burgerDiv" style="display:none;"></div>
I would suggest adding to your checkbox either a data-* or value attribute that ties to the id of the hidden div. I'm not sure how well the data attribute is supported in all browsers, however. Example:
<!-- Checkbox -->
<input type="checkbox" id="burgers" name="color" value="burgersDiv" data-ref="burgersDiv" />
... Then it's pretty easy to hide/show the div:
fiddle

how to make dropdown menu using html & css

I'm trying to create html menu holding a login form, So when I expand the menu, a login form appears, the problem is when I click on the form to write the username or password, the menu collapses automatically and the login form disappears before I write anything inside it
Here is an image of my menu and form in it.
<body>
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>LogIn</span>
<ul class="dropdown">
<li>
Username<input type="text" id="UN"><br/>
password<input type="text" id="pass"><br/>
<input type="submit" id="login" value="login">
</li>
</ul>
</div>​</div>
</div>
<!-- jQuery if needed -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function WTF() {
window.location.href = "";
}
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
</body>

Issue is you have click event on the wrapper itself as well as on the document any click on the input fields or surrounding area executes the click on the wrapper and toggles the state according to your logic. SO any click on the elements inside bubbles up to the parent and toggles its state, that is why it collapses when you click on any input field or any other fields inside your dropdown. So one quick way is to identify the place from which event is coming from and if it is from the dropdown triggers handle it else leave it.
Fiddle
HTML Mark up change:- added a class called dd to both to identify the place of actual trigger.
<div id="dd" class="wrapper-dropdown-3 dd" tabindex="1">
<span class="dd">LogIn</span>
Script
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
event.stopPropagation(); //Stop propagation
if (event.target.className === 'dd') { //check for specfic targets
$(this).toggleClass('active');
}
return false;
});
}
}
If you change your HTML structure to move the .dropdown out of the same wrapper as the trigger this issue won't happen.

I have a very good and light weight code for this check out this it helps you
Html code
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span onclick="uiDrop(this,'#topDrop', false)">LogIn</span>
<ul class="dropdown" id="topDrop">
<li>
<label>Username</label>
<input type="text" id="UN">
</li>
<li>
<label>password</label>
<input type="text" id="pass">
</li>
<li>
<input type="submit" id="login" value="login">
</li>
</ul>
</div>​
</div>
jQuery code
function uiDrop(ths,target, auto){
// target means that div which has to slidetoggle
// auto means target div hide auto
if( $(target).is(':visible'))
$(target).slideUp('fast');
else
$(target).slideDown('fast');
$(target).mouseup(function(e){
e.preventDefault();
return false;
});
$(document).unbind('mouseup');
$(document).mouseup(function(e){
if(auto)
$(target).slideUp('fast');
else
{
//if($(e.target).parent(target).length==0)
$(target).slideUp('fast');
}
});
};
css
.dropdown {
display:none;
list-style:none;
background:#f7f7f7;
padding:10px;
border:1px solid #ddd;
}
.dropdown li{
display:block;
}
.wrapper-dropdown-3{
position:relative; width:200px;
}
#dd span{
display:block;
background:#f7f7f7;
height:30px;
line-height:30px;
padding:0 10px;
}
let me know if you have any problem while using this
you can check this code in demo here is the link
http://visualdecoder.com/plugins/ddSlide/demo.html