This is my java script
<script>
$(document).ready(function () {
$('#btnSubmit').on('click', function (e) {
var cnt = $("input[name='technologies']:checked").length;
var cnt1 = $("input[name='technologies']:checked").val();
alert(cnt1);
if (cnt < 3) {
for (i = 0; i < $("input[name='technologies']:checked").length; i++) {
var cnt2 = cnt1.val(i);
alert(cnt2)
}
alert(cnt);
e.preventDefault();
}
else
alert('Well Done!!!!');
});
});
</script>
My html code
<input type="checkbox" name="technologies" value="JavaScript" />JavaScript <br />
<input type="checkbox" name="technologies" value="Prototype" /> Prototype<br />
<input type="checkbox" name="technologies" value="Dojo" /> Dojo<br />
<input type="checkbox" name="technologies" value="Mootools" /> Mootools <br /></div></td></tr></table>
I need the values of checked in forloop statement. Unable to get the checked values, i am getting only one checked value
You're confused as to what returns an array and what doesn't.
var elms = $("input[name='technologies']:checked")
for (i = 0; i < elms.length; i++) {
var cnt2 = elms[i].val();
alert(cnt2)
}
elms is an array, whose elements can by accessed by index.
Related
I have a function which split the input value on space and I looped through to search them in a number but only the last value is shown (checked) not the other before it .
One solution can be by removing else that way it worked fine but this way when changing the value the checked number remain intact(last searched result are also shown).
let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
SearchingNumbers_btn.addEventListener("click", refree);
function refree() {
var reader = document.getElementsByClassName("checkbox_inputs")
for (let i = 0; i < reader.length; i++) {
var readerText = reader[i].value
var readerText1 = readerText.trim()
var reed = document.getElementById("allNumbers").value;
var reed1 = reed.trim()
var myDiffValues = reed1.split(" ");
document.getElementById("demo").innerHTML = myDiffValues
if (reed != '') {
for (var item of myDiffValues) {
if (readerText1.indexOf(item) > -1) {
reader[i].checked = true;
} else {
reader[i].checked = false;
}
}
} else {
reader[i].checked = false;
}
}
}
<input type="text" name="" id="allNumbers" />
<button id="SearchingNumbers_btn">Select all</button>
<br><br>
<br>
<input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="2528" data-u-mobile="2528" />
<span>2528</span>
<input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="2529" data-u-mobile="2529" />
<span>2529</span>
<input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="2527" data-u-mobile="2527" />
<span>2527</span>
<div id="demo"></div>
One strange behavior it is showing is when lot of space is entered in the input all checkboxes get checked
You can make it much more easily :)
Explanation
First of all you read your inputs (checkbox_inputs).
Then you
read just once the numbers (allNumbers) and you can trim and split
in one line.
Last step: for each one of your checkboxes you set the checked value if the allNumbers list includes the expected value. false otherwise.
Working Example
let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
SearchingNumbers_btn.addEventListener("click", refree);
function refree() {
var inputs = document.getElementsByClassName("checkbox_inputs");
var allNumbers = document.getElementById("allNumbers").value.trim().split(" ");
document.getElementById("demo").innerHTML = allNumbers
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = allNumbers.includes(inputs[i].value);
}
}
<input type="text" name="" id="allNumbers" />
<button id="SearchingNumbers_btn">Select all</button>
<br><br>
<br>
<input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="2528" data-u-mobile="2528" />
<span>2528</span>
<input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="2529" data-u-mobile="2529" />
<span>2529</span>
<input class="checkbox_inputs" type="checkbox" name="sending" class="Sending_JS" value="2527" data-u-mobile="2527" />
<span>2527</span>
<div id="demo"></div>
I'm trying to get the number of checkBoxes checked with using the information from an array but I keep getting undefined. I have to use an array, a switch, and must be in JavaScript for this project. I can't use any other programming Language.
How can I get my function to correctly add the checked boxes?
I am also not sure on how I could implement a switch into this function.+
Please help, I've been working on this for about 4 hours, searching everywhere to find a helpful answer.
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
</head>
<body>
<form id="frmCareer" method="get" action="prjFormEvent.js">
<table id="tblCareer">
<th>Directions: Check of the items you think you would enjoy in each section.<br /> Mark as many items that apply.</th>
<tr><td><strong><label id="lblRealistic">
"R" Section</label></strong>
<div id="realisticTotal"></div>
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic1">Repair a car
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic2">Do wood working
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic3">Refinish furniture
<br />
<input type="checkbox"
name="chkRealistic"
onclick="getRealistic()"
value="chkRealistic4">Explore a forest
<br />
</tr></td>
</table><!--End of tblWhichCareer-->
</form><!--End of frmWhichCareer-->
</body>
</html>
My JavaScript
Global Variables
var getCareer = new Array();
getCareer["chkRealistic1"] = 1;
getCareer["chkRealistic2"] = 1;
getCareer["chkRealistic3"] = 1;
getCareer["chkRealistic4"] = 1;
function getRealistic()
{
var rTotal = 0;
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
rTotal = getCareer[selectedRealistic.value]
document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}//End of function getRealisticCareer()
You missed the fact that this line
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
returns an array of checkboxes with the name chkRealistic (in your example, all four of them).
Instead of assigning the result of the getCareer function to rTotal, you should iterate through the array of HTMLInput in selectedRealistic checking for the .checked property.
var rTotal = 0;
var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
for (var sel = 0; sel < selectedRealistic.length; sel++)
{
if (selectedRealistic[sel].checked)
rTotal += getCareer[selectedRealistic[sel].value]
}
document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
You can check a running example here: http://codepen.io/pabloapa/pen/jPNPNg
Try using:
document.getElementById("lblRealistic").innerHTML = document.querySelectorAll('input[name="chkRealistic"]:checked').length + "/9 Checked";
Try this:
function getRealistic()
{
var rTotal = 0;
for(i=0; i<document.forms[0].chkRealistic.length; i++){
if(document.forms[0].chkRealistic.item(i).checked){
rTotal++;
}
}
document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}
Here try this also on Plunker: http://plnkr.co/edit/085ZtojBgvumktHwQSGf?p=preview
<form id="frmCareer" method="get" action="prjFormEvent.js">
<table id="tblCareer">
<tr>
<th>Directions: Check of the items you think you would enjoy in each section.
<br />Mark as many items that apply.</th>
</tr>
<tr>
<td><strong><label id="lblRealistic">
"R" Section</label></strong>
<div id="realisticTotal"></div>
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic1">Repair a car
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic2">Do wood working
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic3">Refinish furniture
<br />
<input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic4">Explore a forest
<br />
</td>
</tr>
</table>
<!--End of tblWhichCareer-->
</form>
<!--End of frmWhichCareer-->
<script language="JavaScript">
var getCareer = new Array();
getCareer["chkRealistic1"] = 0;
getCareer["chkRealistic2"] = 0;
getCareer["chkRealistic3"] = 0;
getCareer["chkRealistic4"] = 0;
function getRealistic(cbox) {
var rTotal = 0;
var key = cbox.value;
getCareer[key] = cbox.checked ? 1 : 0;
for (var key in getCareer) {
rTotal += getCareer[key];
}
document.getElementById("lblRealistic").innerHTML = rTotal + "/9 Checked"
} //End of function getRealisticCareer()
</script>
So basically i want to count the number of checkboxes that are ticked. I get my code to the point where it counts them successfully, but I want to put in an alert that shows the number of checkboxes ticked, the code does this but doesn't show the total count, it increments the total every refresh. I just want to know how I can show a total count.
It should display the total when the radio button 'yes' is clicked.
<br />Apples
<input type="checkbox" name="fruit" />Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onchange="checkboxes()"
function checkboxes(){
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
count++;
alert(count);
}
}}
This should do the trick:
alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
try this using jquery
Method 1:
alert($('.checkbox_class_here :checked').size());
Method 2:
alert($('input[name=checkbox_name]').attr('checked'));
Method: 3
alert($(":checkbox:checked").length);
Try this code
<br />Apples
<input type="checkbox" name="fruit" checked/>Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();" />
Javascript
function checkboxes()
{
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
count++;
alert(count);
}
}
}
FIDDLE DEMO
Thanks to Marlon Bernardes for this.
alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
If you have more than one form with different checkbox names in each, the above code will count all checkboxes in all forms.
To get over this, you can modify it to isolate by name.
var le = document.querySelectorAll('input[name="chkboxes[]"]:checked').length;
The initial code was very nearly right. the line
alert(count);
was in the wrong place. It should have come after the second closing brace like this:-
function checkboxes()
{
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
count++;
}
}
alert(count);
}
In the wrong place it was giving you an alert message with every checked box.
var checkboxes = document.getElementsByName("fruit");
for(i = 0 ; i<checkboxes.length; i++)
{
if(checkboxes[i].checked==0){checkboxes.splice(i,1);}
}
alert("Number of checked checkboxes: "+checkboxes.length);
function checkboxes(){
var inputs = document.getElementsByTagName("input");
var inputObj;
var selectedCount = 0;
for(var count1 = 0;count1<inputs.length;count1++) {
inputObj = inputs[count1];
var type = inputObj.getAttribute("type");
if (type == 'checkbox' && inputObj.checked) {
selectedCount++;
}
}
alert(selectedCount);
}
<html>
<body>Fruits
<br />
<input type="checkbox" name="fruit" checked/>Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />Apple
<br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();"/>
</body>
</html>
Take a look at this:
<div id="main">
<div id="a">
<input value="1" />
<input value="2" />
<input value="3" />
</div>
<div id="b">
<input value="4" />
<input value="5" />
</div>
</div>
I need to get each input value inside div#a and each input value in div#b and build a matrix/mixing of those values, taking the same example as before, this is what the code should return:
<div id="mixed">
<input value="1" /><input value="4" />
<input value="1" /><input value="5" />
<input value="2" /><input value="4" />
<input value="2" /><input value="5" />
<input value="3" /><input value="4" />
<input value="3" /><input value="5" />
</div>
I have tried to move inside div#main using this code:
$("#main div").each(function() {
var that = $(this);
console.log("that.attr('id')");
});
But console.log() never logs something so I must doing something wrong. This is a advanced topic for me and need some help, any?
UPDATE
At this point I have this maded:
$("#choices div").each(function() {
var that = $(this);
that.each(function() {
var thati = $(this);
console.log(thati);
});
});
And I think in the second .each() is where I can get the input values and try to build the matrix
Should help:
var arr = [];
$('#a input').each(function () {
var that = $(this);
$('#b input').each(function () {
arr.push(that.val());
arr.push($(this).val());
});
});
Then go through the array and dynamically generate the HTML. You can treat this like a matrix by stepping every 2 values.
var a = $('#a input');
var b = $('#b input');
var html = '';
a.each(function () {
var first = this;
b.each(function () {
html += '<div>' + first.outerHTML + this.outerHTML + '</div>'
});
});
$('#mix').html(html);
jsFiddle here
update: code for what's asked for in comments.
var divs = $('#main > div');
var html = '';
divs.each(function (index) {
var divsLength = divs.length,
inputs = $('input', divs[index]),
inputsLength = inputs.length;
for (var i = 0; i < divsLength; i++) {
if (i === index) {
continue;
}
for (var j = 0; j < inputsLength; j++) {
$('input', divs[i]).each(function () {
html += inputs[j].outerHTML + this.outerHTML + '<br />';
});
}
}
});
$('#mix').html(html);
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Is there a way to uncheck all boxes at once?
I have a 4x4 table of checkboxes and I set all their ID's to "cb". I want to have a button that clears all of them, so I tried doing something like below:
document.getElementById("cb").checked="false"
But on the screen, they still remain checked. Is this possible?
ID's are unique, so having multiple elements with the same ID wont solve the problem, it will only make your markup invalid. Use classes instead:
var boxes = document.getElementsByClassName("cb");
for (i=0; boxes.length<i; i++) {
boxes[i].checked = false;
}
You can use something like this:
function toggle(state) {
var cb = document.getElementsByName('cb');
for (var i = cb.length; i--;) {
cb[i].checked = typeof state != 'undefined' ? state : !cb[i].checked;
}
}
Usage:
toggle(false); // Uncheck all
toggle(true); // Check all
toggle(); // Toggle all
In this example you select checkboxes by the name attribute. You can also use class name and select inputs with document.getElementsByClassName or document.querySelectorAll methods.
Demo: http://jsfiddle.net/kCmqL/1/
Check this article Javascript Check and Uncheck All Checkboxes
Here is the code below:
Script
<script language="JavaScript">
function checkAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = true ;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
</script>
HTML
<form name="myform" action="checkboxes.asp" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1">Java<br>
<input type="checkbox" name="list" value="2">Javascript<br>
<input type="checkbox" name="list" value="3">Active Server Pages<br>
<input type="checkbox" name="list" value="4">HTML<br>
<input type="checkbox" name="list" value="5">SQL<br>
<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
<br>
</form>
Best Regards
Try
<script language="javascript">
function checkUnCheckAll(formname)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
</script>
More
You can also your same Name to all controls as below:
<input type="Checkbox" name="compare" id="compare" value="1" />
<input type="Checkbox" name="compare" id="Checkbox1" value="5" />
<input type="Checkbox" name="compare" id="Checkbox2" value="8" />
<input type="Checkbox" name="compare" id="Checkbox3" value="10" />
<input type="button" value="select all" onclick="javascript:checkAll()"/>
<input type="button" value="unckeck all" onclick="javascript: unCheckAll()"/>
<script type="text/javascript">
function checkAll()
{
var c = document.getElementsByName("compare");
for (var i = 0; i < c.length; i++) {
c[i].checked = true;
}
}
function unCheckAll() {
var c = document.getElementsByName("compare");
for (var i = 0; i < c.length; i++) {
c[i].checked = false;
}
}
</script>
While you already have an answer, I thought I'd post the following as an option also. Given the following minimal/demonstrative HTML mark-up:
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" checked />
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" checked />
<input type="checkbox" class="something" name="cb" checked />
The following JavaScript can be used to check, uncheck or toggle all checkboxes returned by the selector:
Object.prototype.check = function (newState) {
switch (newState.toLowerCase()) {
case 'toggle':
for (var i = 0, len = this.length; i<len; i++){
this[i].checked = !this[i].checked;
}
break;
case 'check':
for (var i = 0, len = this.length; i < len; i++) {
this[i].checked = true;
}
break;
case 'uncheck':
for (var i = 0, len = this.length; i < len; i++) {
this[i].checked = false;
}
break;
}
return this;
};
To toggle all, call with (for example):
document.getElementsByClassName('something').check('toggle');.
To check all, call with (for example):
document.getElementsByClassName('something').check('check');.
To uncheck all, call with (for example):
document.getElementsByClassName('something').check('uncheck');.