How can I take checkbox dropdown value if it is selected? - javascript

I'm using bootstrap dropdown checkbox. I am able to take a checkbox value when I click on checkbox.
My problem is that if I have already checked the box by default, I cannot take that value using this script.
Demo link
var options = [];
$('.dropdown-menu a').on('click', function(event) {
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
$inp = $target.find('input'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function() {
$inp.prop('checked', false)
}, 0);
} else {
options.push(val);
setTimeout(function() {
$inp.prop('checked', true)
}, 0);
}
$(event.target).blur();
console.log(options);
return false;
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<input type="checkbox" name="price[]" checked/> Option 1
</li>
<li>
<input type="checkbox" name="price[]" /> Option 2
</li>
<li>
<input type="checkbox" name="price[]" /> Option 3
</li>
<li>
<input type="checkbox" name="price[]" /> Option 4
</li>
<li>
<input type="checkbox" name="price[]" /> Option 5
</li>
<li>
<input type="checkbox" name="price[]" /> Option 6
</li>
</ul>
</div>
</div>
</div>
</div>

You mean this simpler script?
const getOptions = () => $('.dropdown-menu input:checked').map(function() {
return $(this).closest("label").data("value");
}).get()
let options = getOptions();
console.log(options);
$('.dropdown-menu li').on('click', function(event) {
options = getOptions();
$(event.target).blur(); // possibly not necessary
console.log(options);
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<label class="small" data-value="option1" tabIndex="-1"><input type="checkbox" name="price[]" checked/> Option 1</label>
</li>
<li>
<label class="small" data-value="option2" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 2</label>
</li>
<li>
<label class="small" data-value="option3" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 3</label>
</li>
<li>
<label class="small" data-value="option4" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 4</label>
</li>
<li>
<label class="small" data-value="option5" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 5</label>
</li>
<li>
<label class="small" data-value="option6" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 6</label>
</li>
</ul>
</div>
</div>
</div>
</div>

Related

Javascript enable html when input checkbox checked

What should be the condition for: If i click the check box then the items for that particular brand is triggered?
Here I want to print the values for the item selected
The current code is showing Cannot read properties of null (reading 'addEventListener')
let filterBrand = document.getElementById("filter-brands");
filterBrand.addEventListener("change", function() {
if (filterBrand.value == "Amana") {
document.querySelector(".item-list").innerHTML = "";
for (let i = 0; i < productData.length; i++) {
console.log("hello");
}
}
});
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
You can retrieve all checked checkboxes within ul#filter-brands using the css-selector #filter-brands input[type='checkbox']:checked. For example:
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`)) {
console.clear();
const selected = [];
// all checked checkboxes
document.querySelectorAll(`#filter-brands input[type='checkbox']:checked`)
.forEach( cb => /* here you can insert code to display stuff */
selected.push(cb.id) );
console.log(`Selected: ${selected.length ? selected.join(`, `) : `NONE`}`);
}
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
A more specific approach (handler per checkbox):
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`) && evt.target.type === `checkbox`) {
const selected = evt.target.checked;
return document.querySelector(`[data-selector='${evt.target.id}']`)
.classList[evt.target.checked ? `add` : `remove`](`selected`);
}
}
ul {
display: inline-block;
max-width: 50vw;
}
ul#filter-brands {
float: left;
}
#brand-lists li {
display: none;
}
#brand-lists li.selected {
display: revert;
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
<ul id="brand-lists">
<li data-selector="Amana">Amana list</li>
<li data-selector="Frigidaire">Frigidaire list</li>
<li data-selector="GE">GE list</li>
<li data-selector="Insignia">Insignia list
<li data-selector="LG">LG list</li>
<li data-selector="Samsung">Samsung list</li>
<li data-selector="Whirlpool">Whirlpool list</li>
</ul>

Selected checkbox items move to another list and add input field inside li tag?

<ul class="collection list-group" style=" text-align:center;" id="list1" data-ref="mixitup-container">
<li>List 1 <input title="toggle all" type="checkbox" class="all pull-right"></li>
<li class="item green" data-ref="mixitup-target">Second item <input type="checkbox" class="pull-right"></li>
<li class="item blue" data-ref="mixitup-target">More item <input type="checkbox" class="pull-right"></li>
<li class="item pink" data-ref="mixitup-target"> Another <input type="checkbox" class="pull-right"></li>
<li class="item green" data-ref="mixitup-target">Second item <input type="checkbox" class="pull-right"></li>
<li class="item blue" data-ref="mixitup-target">More item <input type="checkbox" class="pull-right"></li>
<li class="item green" data-ref="mixitup-target"> Another <input type="checkbox" class="pull-right"></li>
<li class="item pink" data-ref="mixitup-target">Second item <input type="checkbox" class="pull-right"></li>
<li class="item green" data-ref="mixitup-target">More item <input type="checkbox" class="pull-right"></li>
<li class="item blue" data-ref="mixitup-target"> Another <input type="checkbox" class="pull-right"></li>
</ul>
<button title="Send to list 2" class="btn light-blue center-block add"> <i class="material-icons">add</i></button>
<button title="Send to list 1" style="margin-top:10px;" class="btn light-blue center-block remove"> <i class="material-icons">remove</i></button>
<ul class="collection" style="text-align:center;" id="list2">
<li>Selected <span class="all right">Qty</span></li>
<li>Alpha <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-left"></li>
<li>Charlie <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Bravo <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Alpha <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Charlie <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Bravo <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Alpha <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Charlie <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
<li>Bravo <input id="12464" type="number" class="validate qty right"><input type="checkbox" class="pull-right"></li>
</ul>
i want JavaScript code for this list...selected items from list 1 will append to list 2 with input tag is added same like list 2. and if i select list 1 top checkbox all check boxes need to selected.this all i done only problem is i am not able to appending input tag in the list 2 from list 1
and my JavaScript code is.
$('.add').click(function(){
$('.all').prop("checked",false);
var items = $("#list1 input:checked:not('.all')");
var n = items.length;
if (n > 0) {
items.each(function(idx,item){
var choice = $(item);
var inp = $('<input id="12464" type="number" class="validate qty right">');
var choices = $(choice.parent());
choice.prop("checked",false);
choices.appendTo("#list2");
});
}
else {
alert("Choose an item from list 1");
}
});
$('.remove').click(function(){
$('.all').prop("checked",false);
var items = $("#list2 input:checked:not('.all')");
items.each(function(idx,item){
var choice = $(item);
choice.prop("checked",false);
choice.parent().appendTo("#list1");
});
});
/* toggle all checkboxes in group */
$('.all').click(function(e){
e.stopPropagation();
var $this = $(this);
if($this.is(":checked")) {
$this.parents('.collection').find("[type=checkbox]").prop("checked",true);
}
else {
$this.parents('.collection').find("[type=checkbox]").prop("checked",false);
$this.prop("checked",false);
}
});
$('[type=checkbox]').click(function(e){
e.stopPropagation();
});
/* toggle checkbox when list group item is clicked */
$('.collection a').click(function(e){
e.stopPropagation();
var $this = $(this).find("[type=checkbox]");
if($this.is(":checked")) {
$this.prop("checked",false);
}
else {
$this.prop("checked",true);
}
if ($this.hasClass("all")) {
$this.trigger('click');
}
});
waiting for answer thanks.

How to add check box checked count value

i need to add the total number of check box checked count value in element.
But when i checked the check box in "heading 2" part , the count value was added in "heading 1" part .
I did not find the issue any one please guide me resolve this issue
DEMO
HTMl:
<div id="main">
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 2</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var $checkboxes = $(
'#main ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('.count-checked-checkboxes').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes').val(
countCheckedCheckboxes);
});
});
see the working solution. Remember IDs needs to be unique, and avoid use of IDs whenever possible like putting input element inside the label instead of using with Id
$(document).ready(function() {
var $checkboxes1 = $('#head1 ul input[type="checkbox"]');
var $checkboxes2 = $('#head2 ul input[type="checkbox"]');
$checkboxes1.change(function() {
var countCheckedCheckboxes = $checkboxes1.filter(':checked').length;
$('#head1 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
$checkboxes2.change(function() {
var countCheckedCheckboxes = $checkboxes2.filter(':checked').length;
$('#head2 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="head1">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 -b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a" id="head2">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 - b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
</div>
See if this works.
Ignoring everything others have mentioned, about ID's needing to be unique and what not, I was able to tally checked boxes for each heading using DOM traversal.
I changed the jQuery to:
$(document).ready(function() {
$('.a').each(function(){
var $checkboxes = $(this).find('input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.a').find('.count-checked-checkboxes').text(
countCheckedCheckboxes);
});
});
});
Loop through each element '.a'
Use $(this).find('input[type="checkbox"]'); to get just the relevant checkboxes
On change, traverse up the DOM until you find '.a', from there you can traverse down and find the heading class '.count-checked-checkboxes'
There's probably a better way to do this though.
.closest() starts at the current element and travels upwards looking for a match.
.find() travels downwards through descendants.
Couple things.
j08691 is right, IDs must be unique. The browser is getting the first #count-checked-checkboxes and filling that value.
Also, you are getting the count for all checkboxes which is going to tally all checkboxes regardless of which div they are in
I would suggest the following:
$(document).ready(function() {
var $checkboxes = $(
'.a ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-a').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-a').val(
countCheckedCheckboxes);
});
});
But you are still getting all checkboxes. At which point I would change your second <div class="a"> to <div class="b"> and then duplicate the above statement like so:
$(document).ready(function() {
var $checkboxes = $(
'.b ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-b').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-b').val(
countCheckedCheckboxes);
});
});
And of course change your IDs to match the ones in the jquery.
https://jsfiddle.net/gqcgwjq2/28/

Using JQuery to dynamically check if no of radio button many group has been checked

I know this question had a lots of related resources. But, Still i need a perfect solution.
I have generated five number of radio buttons group dynamically. Each group holds upto five radio buttons. I have validated "none checked in" and "at least one checked in feature" as an individual group.
My question is, How do I validate whether "All the groups are checked"
for ref:
My code Below:
var names = [];
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
alert('none checked in ' + name);
}
else{
// At least one checked
var val = radio_buttons.val();
}
}
I need to redirect to other page when all the radio button groups are checked. Its a bit simple. But, look complex for me.
Please Help.
UPDATE
My generated HTML for first two groups.
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
</ul></div></div></div>
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
</ul></div></div></div>
note: Here group name alone gets changed.
Changed
<div id="ratingContainer">
to
<div class="ratingContainer"> .
Removed
onclick="checkThis(this);"
from html , added one event handler for all input elements
elems.find("input").on("change", checkThis);
Try
var allChecked = false;
var names = [];
var elems = $(".0");
function checkThis(e) {
var name = e.target.name;
if (names.length < elems.length) {
names.push(name);
};
allChecked = elems.get().every(function(el, i) {
return $(el).find(":checked").is("*")
});
alert(name + " checked");
if (allChecked) {
// do stuff
alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked);
};
};
elems.find("input").on("change", checkThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="0" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="0" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="0" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="0" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="0" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="1" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="1" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="1" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="1" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="1" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
Looks like you already know how to count up the checked elements. If you put that in the first loop, you can mark a variable false if any come up empty.
var names = [];
var allChecked = true;
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
if $(this).filter(':checked').length === 0 {
allChecked = false;
}
});
https://jsfiddle.net/eu6L1f80/2/
Javascript:
$('form').on('submit', function(e) {
e.preventDefault();
var checkboxes = {};
$(':checkbox').each(function() {
checkboxes[$(this).attr('name')] = true;
});
$.each(checkboxes, function(i, val) {
if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
});
if (!Object.keys(checkboxes).length) {
alert('success!');
} else {
alert('error!');
}
});
HTML:
<form>
<div>
Group:
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
</div>
<button type="submit">Submit</button>
<form>

Skip Logic Javascript For HTML Survey Form

Anyone have any sample code to provide conditional skip logic within the context of an HTML survey form?
Here is a sample of the HTML I am trying to work with; for example if a user select an answer to question 19 and then skip to 21:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/querystring.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/rateit/jquery.rateit.min.js?v=2013-08-19"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form.CoreMotives').submit(function() {
if (!ValidateRequiredFields(this)) return false;
var submitButton = $(this).find("input[type='submit']");
if (submitButton != null) {
if (submitButton.attr('disabled') == 'disabled') return false;
submitButton.attr('disabled', 'disabled');
}
coreMotives.initForm(this);
return true;
});
var qs = new Querystring();
$('#txtFirstName').val(qs.get("txtFirstName", ""));
$('#txtLastName').val(qs.get("txtLastName", ""));
$('#txtCompanyName').val(qs.get("txtCompanyName", ""));
$('#txtTelephone').val(qs.get("txtTelephone", ""));
$('#txtEmailAddress').val(qs.get("txtEmailAddress", ""));
$('#txtComments').val(qs.get("txtComments", ""));
$('#Q22').val(qs.get("Q22", ""));
$('input[name=Question19][value=' + qs.get("Question19", "") + ']').prop('checked', true);
if ($.isNumeric(qs.get("Question1", ""))) $('#Question1').val(parseInt(qs.get("Question1", "")));
if ($.isNumeric(qs.get("Question2", ""))) $('#Question2').val(parseInt(qs.get("Question2", "")));
if ($.isNumeric(qs.get("Question3", ""))) $('#Question3').val(parseInt(qs.get("Question3", "")));
if ($.isNumeric(qs.get("Question4", ""))) $('#Question4').val(parseInt(qs.get("Question4", "")));
$('div.rateit').rateit();
});
</script>
<script type="text/javascript" src="//databroker.coremotives.com/Styles/WebForms/form.js"></script>
<link rel="stylesheet" href="//databroker.coremotives.com/Styles/WebForms/form.css" type="text/css" />
<link rel="stylesheet" href="//databroker.coremotives.com/Scripts/rateit/rateit.css?v=2013-08-19" type="text/css"/>
<style type="text/css">
</style>
</head>
<body class="noI">
<div id="container">
<form class="CoreMotives" method="post" enctype="multipart/form-data" action="//databroker.coremotives.com/WebCapture.aspx?cm_cid=01d60c03-47d8-e211-b434-00155d32390f&cm_iid=1584&cm_formid=b9e27eb2-49a5-e311-8684-000c293cd65c">
<ul>
<li class="complex">
<div>
<span class="half left">
<label class="desc" for="txtFirstName">First Name</label>
<input id="txtFirstName" name="txtFirstName" type="text" class="field text full " maxlength="255" tabindex="1" value="" />
</span>
<span class="half right">
<label class="desc" for="txtLastName">Last Name</label>
<input id="txtLastName" name="txtLastName" type="text" class="field text full " maxlength="255" tabindex="2" value="" />
</span>
</div>
</li>
<li>
<label class="desc" for="txtCompanyName">Company</label>
<div class="large">
<input id="txtCompanyName" name="txtCompanyName" type="text" class="field text full " maxlength="255" tabindex="3" value="" />
</div>
</li>
<li>
<label class="desc" for="txtTelephone">Phone</label>
<div class="large">
<input id="txtTelephone" name="txtTelephone" type="text" class="field text full " maxlength="255" tabindex="4" value="" />
</div>
</li>
<li>
<label class="desc" for="txtEmailAddress">Email<span class="req">*</span></label>
<div class="large">
<input id="txtEmailAddress" name="txtEmailAddress" type="text" class="field text full email" maxlength="255" tabindex="5" value="" />
</div>
</li>
<li>
<label class="desc" for="txtComments">Comments</label>
<div class="large">
<textarea id="txtComments" name="txtComments" class="field textarea medium " rows="10" cols="50" tabindex="6"></textarea>
</div>
</li>
<li>
<label class="desc" for="Question1">1. How satisfied are you, the employer, with BCBSVT?</label>
<div class="large">
<input type="text" id="Question1" name="Question1"/><div class="rateit star_blue" data-rateit-backingfld="#Question1" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question2">2. How satisfied would you say your employees are with BCBSVT?</label>
<div class="large">
<input type="text" id="Question2" name="Question2"/><div class="rateit star_red" data-rateit-backingfld="#Question2" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question3">3. Would you recommend BCBSVT to a business colleague?</label>
<div class="large">
<input type="text" id="Question3" name="Question3"/><div class="rateit star_red" data-rateit-backingfld="#Question3" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question4">4. At your next contract renewal, how likely is your company to renew with BCBSVT?</label>
<div class="large">
<input type="text" id="Question4" name="Question4"/><div class="rateit star_red" data-rateit-backingfld="#Question4" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<div class="large">
<label id="" class="desc">5. If benefits and their costs are the most important factors for considering a health insurance car</label>
</div>
</li>
<li>
<label class="desc" for="Question19">19. Did your company conduct open enrollment meetings for employees to discuss benefits for the new</label>
<div class="large">
<div><span style="width:100%; padding-bottom:0px;"><input id="Question19_0" name="Question19" type="radio" class="field radio" value="83668" tabindex="12" /><label class="choice" for="Question19_0">Yes</label></span><span style="width:100%; padding-bottom:0px;"><input id="Question19_1" name="Question19" type="radio" class="field radio" value="60591" tabindex="13" /><label class="choice" for="Question19_1">No</label></span></div>
</div>
</li>
<li>
<label class="desc" for="Q22">22. How can BCBSVT improve the open enrollment process for your company?</label>
<div class="large">
<textarea id="Q22" name="Q22" class="field textarea medium " rows="10" cols="50" tabindex="13"></textarea>
</div>
</li>
<li class="buttons">
<div><input id="submitButton" name="submitButton" class="btTxt submit" type="submit" value="Submit" /></div>
</li>
</ul>
</form>
</div>
<img id="bottom" src="//databroker.coremotives.com/Styles/WebForms/bottom.png" alt="" />
<script type="text/javascript">
var path = (("https:" == document.location.protocol) ? "https://databroker.coremotives.com/databroker.js?version=2" : "http://cdn.coremotivesmarketing.com/databroker.js");
document.write(unescape("%3Cscript src='" + path + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var coreMotives = new DataBroker();
coreMotives.customerId = "01d60c03-47d8-e211-b434-00155d32390f";
coreMotives.instanceId = 1584;
coreMotives.formId = "b9e27eb2-49a5-e311-8684-000c293cd65c";
coreMotives.trackPageView();
} catch (e) { }
</script>
</body>
</html>

Categories

Resources