Checkbox(javascript) selection, first item showing undefined?

Checkbox(javascript) selection, first item showing undefined? - javascript

I am trying to select and return some items(checkbox). Everything is okay, but the first item is always showing UNDEFINED. can't fix this problem!
My code is as below
function checkList () {
var checked;
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" >Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>

Try to Change
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
to This....
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2">Book</label>
<br/>
<input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
You have multiple duplications within the code such as (for="")
Let me know, Thanks

Change
var checked; // like this, checked is undefined
to
var checked = ""; // now it's simply empty
here's a fiddle
http://jsfiddle.net/sq9938b0/

The issue is that you initialize checked variable as undefined. When you append the string to undefined it is converted to string "undefined", hence it appearing at the beginning.
Just initialize it as an empty string: var checked = "";
function checkList () {
var checked = "";
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>

Take a look of the following step
checked = checked + element.value + "";
In the first loop you have not defined checked. So first time it is
checked = undefined + pen
Intialize
var checked = ''

Related

jQuery multi-step form: disable next button when fields unchecked

I have a multi-step form that has a "next" and "back" button on each step of the form. I'm using jQuery to enable the "next" button once the criteria for each section is met. For example: at least one checkbox is checked or a radio button is selected.
I'm having an issue where after completing a number of sections, I go back to a previous section and uncheck all checkboxes and the "next" button remains enabled.
There's a Codepen here of a rough version of what I'm working with - note all sections are visible to show how the button remains enabled once you begin checking/unchecking: https://codepen.io/abbasarezoo/pen/jZgQOV
My current code:
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
JS:
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
if ($('.panels input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
Is there any way to make this work?

when you select the input to see if is checked, you're selecting all inputs
if ($('.panels input:checked').length >= 1) {
you need to select just the inputs from the panel the user clicked
if ($(this).closest('.panels').find('input:checked').length >= 1) {
https://codepen.io/spacedog4/pen/YaWqdo?editors=1010

Please see below comment in $panelsInput.click(function (){});, you need to get the checked count for current panel (the user clicks), instead of all.
So the comparasion in your codes:
$('.panels input:checked').length >= 1
need to change to:
$(this).parent().find('input:checked').length >= 1
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
//get current input, find out its parent, then get the count of checked
if ($(this).parent().find('input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

I thought it is interesting to handle interactions using event delegation at the form level which is more flexible:
Only one handler is loaded in memory. (By the way only a single scope is in charge of the logic behind the prev/next behavior).
You can add dynamically panels to the form (with the same markup structure) and buttons will work right away without requiring another listener registering step.
var $panelsInput = $('.panels input')
, $rowsInput = $('.rows input')
;
$('form').on('click', function (e) {
let $t = $(this)
, $target = $(e.target)
, $fieldset = $target.closest('fieldset')
, $rows = $fieldset.find('.radio-row')
;
// When a button is clicked
if ($target.is('button')) {
// Next button
if ($target.is('.next-q')) {
$fieldset.addClass('hide').next().addClass('show');
// Prev button
} else {
// Untick boxes
$fieldset.find('input').prop('checked', false).end()
// Disable appropriate button
.find('.next-q').prop('disabled', true).end()
.prev().removeClass('hide').nextAll().removeClass('show');
}
// When a checkbox is clicked
} else if ($target.is('input')) {
let $containers = ($rows.length ? $rows : $fieldset)
, containersHavingAtickedBox = $containers.filter(function() {
return !!$(this).find('input:checked').length
})
, shouldEnable = $containers.length === containersHavingAtickedBox.length
;
$fieldset.find('.next-q').prop('disabled', !shouldEnable);
}
});
fieldset ~ fieldset, .hide{display:none}
fieldset.show:not(.hide){display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

Select multiple checkboxes in multi categories jQuery

I'm trying to configure multiple checkboxes with jQuery,
I want User can select 8 checkboxes max inside 2 different categories max.
Currently User can select 8 checkboxes but I don't how to restrict to 2 categories.
$(document).ready(function () {
$("input[name='tech']").change(function () {
var maxAllowed = 8;
var cnt = $("input[name='tech']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can select maximum ' + maxAllowed + ' technologies!!');
}
});
});
Full code example: https://jsfiddle.net/zy34p5cy/2
Any idea?

There many possible solutions. For example using classes. Like this https://jsfiddle.net/zy34p5cy/16/
var maxAllowed = 8;
var cnt = $("input[name='tech']:checked").length;
var cat1 = $("input.cat1[name='tech']:checked").length > 0 ? 1 : 0;
var cat2 = $("input.cat2[name='tech']:checked").length > 0 ? 1 : 0;
var cat3 = $("input.cat3[name='tech']:checked").length > 0 ? 1 : 0;
var cats = cat1 + cat2 + cat3
if (cnt > maxAllowed || cats > 2) ...

A simplistic approach would be as follows:
<h3>Select multi checkbox inside 2 categories max:</h3>
<div class="col-xs-4">
<h5>Category 1</h5>
<input type="checkbox" name="tech1" value="jQuery" /> checkbox
<br/>
<input type="checkbox" name="tech1" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" name="tech1" value="Prototype" /> checkbox
<br/>
<input type="checkbox" name="tech1" value="Dojo" /> checkbox
<br/>
<input type="checkbox" name="tech1" value="Mootools" /> checkbox
<br/>
</div>
<div class="col-xs-4">
<h5>Category 2</h5>
<input type="checkbox" name="tech2" value="jQuery" /> checkbox
<br/>
<input type="checkbox" name="tech2" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" name="tech2" value="Prototype" /> checkbox
<br/>
<input type="checkbox" name="tech2" value="Dojo" /> checkbox
<br/>
<input type="checkbox" name="tech2" value="Mootools" /> checkbox
<br/>
</div>
<div class="col-xs-4">
<h5>Category 3</h5>
<input type="checkbox" name="tech3" value="jQuery" /> checkbox
<br/>
<input type="checkbox" name="tech3" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" name="tech3" value="Prototype" /> checkbox
<br/>
<input type="checkbox" name="tech3" value="Dojo" /> checkbox
<br/>
<input type="checkbox" name="tech3" value="Mootools" /> checkbox
<br/>
</div>
$(document).ready(function () {
var maxAllowedCheckboxes = 8;
$("input[name='tech1']").change(function () {
restrictCheckboxSeletions($(this));
});
$("input[name='tech2']").change(function () {
restrictCheckboxSeletions($(this));
});
$("input[name='tech3']").change(function () {
restrictCheckboxSeletions($(this));
});
function restrictCheckboxSeletions(checkbox) {
var countTech1 = $("input[name='tech1']:checked").length;
var countTech2 = $("input[name='tech2']:checked").length;
var countTech3 = $("input[name='tech3']:checked").length;
if (countTech1 > 0 && countTech2 > 0 && countTech3 > 0) {
checkbox.prop("checked", "");
alert('You can only select from 2 categories!');
} else {
var totalCount = countTech1 + countTech2 + countTech3;
if (totalCount > maxAllowedCheckboxes) {
checkbox.prop("checked", "");
alert('You can select maximum ' + maxAllowedCheckboxes + ' categories!');
}
}
}
});

I have included data-attribute in your html input.
<h3>Select multi checkbox inside 2 categories max:</h3>
<div class="col-xs-4">
<h5>Category 1</h5>
<input type="checkbox" data-category="Category1" name="tech" value="jQuery" /> checkbox
<br/>
<input type="checkbox" data-category="Category1" name="tech" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" data-category="Category1" name="tech" value="Prototype" /> checkbox
<br/>
<input type="checkbox" data-category="Category1" name="tech" value="Dojo" /> checkbox
<br/>
<input type="checkbox" data-category="Category1" name="tech" value="Mootools" /> checkbox
<br/>
</div>
<div class="col-xs-4">
<h5>Category 2</h5>
<input type="checkbox" data-category="Category2" name="tech" value="jQuery" /> checkbox
<br/>
<input type="checkbox" data-category="Category2" name="tech" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" data-category="Category2" name="tech" value="Prototype" /> checkbox
<br/>
<input type="checkbox" data-category="Category2" name="tech" value="Dojo" /> checkbox
<br/>
<input type="checkbox" data-category="Category2" name="tech" value="Mootools" /> checkbox
<br/>
</div>
<div class="col-xs-4">
<h5>Category 3</h5>
<input type="checkbox" data-category="Category3" name="tech" value="jQuery" /> checkbox
<br/>
<input type="checkbox" data-category="Category3" name="tech" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" data-category="Category3" name="tech" value="Prototype" /> checkbox
<br/>
<input type="checkbox" data-category="Category3" name="tech" value="Dojo" /> checkbox
<br/>
<input type="checkbox" data-category="Category3" name="tech" value="Mootools" /> checkbox
<br/>
</div>
and modified the JS as follows:
$(document).ready(function () {
$("input[name='tech']").change(function () {
maxAllowed = 8;
var count = 1;
var first = $("input[name='tech']:checked:first").data("category");
var cnt = $("input[name='tech']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can select maximum ' + maxAllowed + ' categories!');
}
var cat = $("input[name='tech']:checked").each(function(index) {
if($(this).data('category') != first)
count ++;
if(count > 2)
alert("Can't have more than two categories");
});
});
});
Hope it helps.

Give each group a distinct property,the logic is easy to follow
$(document).ready(function () {
$("input[name='tech']").change(function () {
var maxAllowed = 8;
var maxgr =2;
var cnt = $("input[name='tech']:checked").length;
var groups = [];
$("input[name='tech']:checked").each(function () {
groups.push( $(this).attr('group'));
if ($.unique(groups).length>2){
$(this).prop("checked", "");
alert('You can select maximum ' + maxgr + ' groups!');
}
});
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can select maximum ' + maxAllowed + ' categories!');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Select multi checkbox inside 2 categories max:</h3>
<div class="col-xs-4">
<h5>Category 1</h5>
<input type="checkbox" group="c" name="tech" value="jQuery" /> checkbox
<br/>
<input type="checkbox" group="c" name="tech" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" group="c" name="tech" value="Prototype" /> checkbox
<br/>
<input type="checkbox" group="c" name="tech" value="Dojo" /> checkbox
<br/>
<input type="checkbox" group="c" name="tech" value="Mootools" /> checkbox
<br/>
</div>
<div class="col-xs-4">
<h5>Category 2</h5>
<input type="checkbox" group="a" name="tech" value="jQuery" /> checkbox
<br/>
<input type="checkbox" group="a" name="tech" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" group="a" name="tech" value="Prototype" /> checkbox
<br/>
<input type="checkbox" group="a" name="tech" value="Dojo" /> checkbox
<br/>
<input type="checkbox" group="a" name="tech" value="Mootools" /> checkbox
<br/>
</div>
<div class="col-xs-4">
<h5>Category 3</h5>
<input type="checkbox" group="b" name="tech" value="jQuery" /> checkbox
<br/>
<input type="checkbox" group="b" name="tech" value="JavaScript" /> checkbox
<br/>
<input type="checkbox" group="b" name="tech" value="Prototype" /> checkbox
<br/>
<input type="checkbox" group="b" name="tech" value="Dojo" /> checkbox
<br/>
<input type="checkbox" group="b" name="tech" value="Mootools" /> checkbox
<br/>
</div>

Printing values of all radio buttons to a textarea?

So I have a list of radio buttons all in one span that when encode is pressed I want to use JavaScript to print the values of these radio buttons to a text area (id of: BINARYBit), using the function bin2dec. I need these values to be 1 if the radio is selected and 0 if it is not. I have added a snippet below that shows my whole document.
Any thoughts ?
thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="container">
<div class="col-lg-8">
<label for="HEXBit">Input the Bitmask Here</label>
<br/>
<input type="text" class="form-control" id="DECBit" />
<br/>
<input type="submit" class="btn btn-primary btn-sm" id="Submit" value="Decode" onclick="dec2bin();" />
<br/>
<input type="text" class="form-control" id="BINARYBit" disabled="disabled" />
<br/>
<input type="submit" class="btn btn-primary btn-sm" id="SubmitCon" value="Encode" onclick="bin2dec();" />
<br/>
<span id="radiocheck">
<br/>
<input type="radio" id="BinaryMessage" />
<label for="BinaryMessage">Send Binary Message</label>
<br/>
<input type="radio" id="Param1" />
<label for="Param1">Param1</label>
<br/>
<input type="radio" id="MDMID" />
<label for="MDMID">Modem ID </label>
<br/>
<input type="radio" id="GPIO" />
<label for="GPIO">GPIO</label>
<br/>
<input type="radio" id="AnalogDigi1" />
<label for="AnalogDigi1">Digital/Analog 1</label>
<br/>
<input type="radio" id="AnalogDigi2" />
<label for="AnalogDigi2">Digital/Analog 2</label>
<br/>
<input type="radio" id="StoreMsg" />
<label for="StoreMsg">Save Message if no GPRS</label>
<br/>
<input type="radio" id="InputNum" />
<label for="InputNum">Input Event Number</label>
<br/>
<input type="radio" id="GPSDate" />
<label for="GPSDate">GPS Date</label>
<br/>
<input type="radio" id="GPSStatus" />
<label for="GPSStatus">GPS Status</label>
<br/>
<input type="radio" id="GPSLat" />
<label for="GPSLat">Latitude</label>
<br/>
<input type="radio" id="GPSLong" />
<label for="GPSLong">Longitude</label>
<br/>
<input type="radio" id="GPSSpeed" />
<label for="GPSSpeed">GPS Speed (Knots)</label>
<br/>
<input type="radio" id="GPSHeading" />
<label for="GPSHeading">Heading</label>
<br/>
<input type="radio" id="GPSTime" />
<label for="GPSTime">GPS Time</label>
<br/>
<input type="radio" id="GPSAlt" />
<label for="GPSAlt">Altitude</label>
<br/>
<input type="radio" id="GPSNoSAT" />
<label for="GPSNoSAT">Number of GPS Satelites</label>
<br/>
<input type="radio" id="LowPowerMsg" />
<label for="LowPowerMsg">Stop Messages In Low Power</label>
<br/>
<input type="radio" id="SMSNoGPRS" />
<label for="SMSNoGPRS">Send SMS When No GPRS</label>
<br/>
<input type="radio" id="LastKnownGPS" />
<label for="LastKnownGPS">Use Last Known GPS When Unavaliable</label>
<br/>
<input type="radio" id="GPSOdo" />
<label for="GPSOdo">Odometer</label>
<br/>
<input type="radio" id="RTCTime" />
<label for="RTCTime">RTC Time</label>
<br/>
<input type="radio" id="ShortID" />
<label for="ShortID">Use Short Modem ID</label>
<br/>
<input type="radio" id="BattLVL" />
<label for="BattLVL">Power Level</label>
<br/>
<input type="radio" id="GPSOverSpeed" />
<label for="GPSOverSpeed">GPS Overspeed Data</label>
<br/>
<input type="radio" value="1" id="PCELL" />
<label for="PCELL">PCELL Data</label>
<br/>
<input type="radio" id="GPSALTOvr" />
<label for="GPSALTOvr">GPS Alternative Over Speed</label>
</span>
</div>
</div>
</body>
<script language="JavaScript">
function dec2bin() {
var dec = document.getElementById("DECBit").value
var val = (dec >>> 0).toString(2);
var pad = "00000000000000000000000000000000";
var answer = pad.substring(0, pad.length - val.length) + val;
var arr = [];
for (var i = 0; i < answer.length; i++) {
arr[i] = (answer.charAt(i) == "1" ? true : false);
}
arr.reverse();
console.log(answer);
console.log(arr);
document.getElementById("BINARYBit").value = answer;
var span = document.getElementById("radiocheck");
var inputs = span.getElementsByTagName("input");
for (var i = 0; i < arr.length; ++i) {
var thing = inputs[i];
thing.checked = arr[i];
}
function bin2dec() {
}
}
</script>
</html>

With native javascript, the best way would be to give all the inputs that you want to check a class like class="item" and then you search for all of these items in the function as so:
function bin2dec() {
var printableEncoded = "",
items = document.getElementsByClassName("item");
// For each item if it's checked include a '1', else a '0'
for (var i = 0; i < items.length; i++) {
printableEncoded += items[i].checked ? "1" : "0";
}
// Change the value of the disabled input to the encoded string
document.getElementById("BINARYBit").value = printableEncoded;
}
Example of HTML:
<input type="radio" value="1" id="PCELL" class="item" />
<label for="PCELL">PCELL Data</label>

solution using jquery
function encode()
{
var value="";
//select all radio buttons
$(".container input[type='radio']").filter(function(i,el){
//check if radio button is checked
value=value + ( ($(el).prop("checked")==true)? "1":"0");
});
$("#BINARYBit").val(value);
}
refereces:
http://api.jquery.com/filter/

Add discount to shopping-cart using checkboxes

I really need someone who can help me :-)
I want to give customers a discount by clicking various checkboxes in my shop.
Visitors can choose max 4 checkboxes. not 5, 6 etc. Is it possible to do this?
My problem now is that the customer can actually get the item for free - or worse - I have to pay to sell goods to them!
Here is the test-code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="20" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" />
<label for="checkbox4" class="css-label">jam </label><br>
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" />
<label for="checkbox5" class="css-label">orange </label><br>
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" />
<label for="checkbox6" class="css-label">pinepple </label><br>
<br /><br />
<span id="total"><b>Normal price: </b> 100</span></p>
<script>
var $total = 100;
var $total2 = 100;
$('input:checkbox').on('change', function() {
if (this.checked)
$total += -this.value;
else
$total -= -this.value;
if ($total2 > $total)
$('#total').html('<b>Discount price: </b>'+$total);
else
$('#total').html('<b>Normal price: </b>'+$total);
});
</script>

So the logic is -
If the 4 checkboxes are clicked then disable rest
var $total = 100;
var $total2 = 100;
$('input:checkbox').on('change', function() {
if($('input:checked').length == 4) {
$('input:checkbox:not(:checked)').attr("disabled", true);
}
else {
$('input:checkbox:not(:checked)').attr("disabled", false);
}
if (this.checked)
$total += -this.value;
else
$total -= -this.value;
if ($total2 > $total)
$('#total').html('<b>Discount price: </b>'+$total);
else
$('#total').html('<b>Normal price: </b>'+$total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="20" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="20" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="20" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="20" />
<label for="checkbox4" class="css-label">jam </label><br>
<input type="checkbox" name="checkbox5" id="checkbox5" class="css-checkbox" value="20" />
<label for="checkbox5" class="css-label">orange </label><br>
<input type="checkbox" name="checkbox6" id="checkbox6" class="css-checkbox" value="20" />
<label for="checkbox6" class="css-label">pinepple </label><br>
<span id="total"><b>Normal price: </b> 100</span>

Javascript: Select all checkboxes by classname

I'm having an issue with the following code which selects all checkboxes in the row based on the 'Select All' button clicked. The problem is I have to click each button twice if some checkboxes are already checked in order to change their state. I'd like to do this with just one click on each button no matter if checkboxes are selected or not. Is there a simple way to do this? Thank you!
jsFiddle
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>
checked = true;
function CheckUncheckAllAndExcludeDisabledByClass(theElement,theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = checked;
}
}
checked = !checked;
}

You can use this demo to check uncheck of checkbox on single click, click on below link and check demo and integrate in your system.
HTML CODE:
<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>
Jquery Code
function check_uncheck_checkbox(isChecked) {
if(isChecked) {
$('input[name="language"]').each(function() {
this.checked = true;
});
} else {
$('input[name="language"]').each(function() {
this.checked = false;
});
}
}
http://phppot.com/jquery/check-uncheck-all-checkbox-using-jquery/
Thanks

You need to store separate state for each checkbox type
checked = {};
function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
var ckd = checked[theCheckBoxClass] === false ? false : true;
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = ckd;
}
}
checked[theCheckBoxClass] = !ckd;
}
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>
But if you have jQuery then
$('.select-all').click(function() {
var $this = $(this),
checked = !$this.data('checked');
$('.' + $this.data('class')).not(':disabled').prop('checked', checked);
$this.data('checked', checked)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="edit">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="view">
</form>

You can do it like this :
HTML :
<div id="test">
<input type="checkbox" id="check1" name="check1" class="check">
<input type="checkbox" id="check01" name="check01" class="check" disabled="disabled" checked>
<input type="checkbox" id="check2" name="check2" class="check" disabled="disabled">
<input type="checkbox" id="check3" name="check3" class="check">
<input type="checkbox" id="check4" name="check4" class="check">
<input type="checkbox" id="check50" name="check50" class="check">
<input type="checkbox" id="check6" name="check6" class="check">
</div>
<input type="button" id="uncheckAll" value="select all">
JS :
$('#uncheckAll').click(function(){
var checks = $('input[class="check"]');
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
if (check.checked) {
check.checked = false;
}
}
}
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
if (!check.checked) {
check.checked = true;
}
}
}
});
Here is the working Fiddle
Do let me know if it is according to your requirement.
Happy Coding.

Try adjusting checked variable to utilize Array.prototype.filter to select elements not disabled , Array.prototype.every to toggle element checked attribute
function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
var checked = Array.prototype.filter.call(checks, function(el) {
return !el.disabled
}).every(function(el) {
return el.checked
});
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = !checked ? true : false;
}
}
}
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>

Problem is you are using same flag for multiple class names:
Plain Js solution:
var state = {};
var toggle = function(clas) {
var chk = state[clas] = !state[clas];//flips the state (true/false)
var chks = document.getElementsByClassName(clas);
var l = chks.length;
while (l--)
if (!chks[l].disabled)
chks[l].checked = chk;
};
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="toggle('edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="toggle('view')" title="Select all: items.">
</form>

We Keep Coding

JavaScript is the programming language of the Web.

Checkbox(javascript) selection, first item showing undefined? - javascript

Change var checked; // like this, checked is undefined to var checked = ""; // now it's simply empty here's a fiddle http://jsfiddle.net/sq9938b0/

Take a look of the following step checked = checked + element.value + ""; In the first loop you have not defined checked. So first time it is checked = undefined + pen Intialize var checked = ''

Related

jQuery multi-step form: disable next button when fields unchecked

Select multiple checkboxes in multi categories jQuery

Printing values of all radio buttons to a textarea?

Add discount to shopping-cart using checkboxes

Javascript: Select all checkboxes by classname

Categories

Resources