I am trying to count the number of checkbox elements on the current panel I am on. What is happening is that I have checkboxes on 4 panels, on each panel there are checkboxes.
Only one panel can be open at a time. When I do a count of checkboxes, I am getting the total of all the checkboxes in my app and not the number on the panel I am showing.
I have tried specifically telling the code that this is the window open
var a = angular.element(document.querySelector('[widget-id="popup-1"]
div')).scope().$parent.me.visible
but to no avail,
I am not sure how to tell the code that this is the panel that is open, count checkboxes on it only.
I am trying to count the number of boxes, then compare checked boxes and if num = checked, then I will continue on.
$scope.checkNum = function() {
// var a = angular.element(document.querySelector('[widget-id="popup-1"]
div')).scope().$parent.me.visible
var inputs = document.getElementsByTagName("input");
//or document.forms[0].elements;
var cbs = [];
//will contain all checkboxes
var checked = [];
//will contain all checked checkboxes
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
cbs.push(inputs[i]);
if (inputs[i].checked) {
checked.push(inputs[i]);
}
}
}
var nbCbs = cbs.length;
//number of checkboxes
var nbChecked = checked.length;
//number of checked checkboxes
alert("# checkboxes = " + nbCbs + "\n" + "# checked checkboxes = " +
nbChecked);
console.log(" # checked checkboxes = " + nbChecked);
}
let's say your current panel looks like the following
var test = document.getElementById("dv_Test");
get_CheckboxCount(test);
function get_CheckboxCount(element) {
var check = element.querySelectorAll("input[type=checkbox]");
console.log(check.length);
}
<div id="dv_Test">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div id="dv_Test2">
<input type="checkbox" />
</div>
Related
i am trying to get the value of selected radio buttons so i can submit my form using Ajax i searched here for some help but i couldn't find any useful solution
<input type="radio" id="answer" name="answer<?php echo $function::escape_string($question_row->question_id); ?>"
value="<?php echo $function::escape_string($answer_row>answer_id); ?>"/>
-HTML Output
<input type="radio" id="answer" name="answer16" value="107"/>
<input type="radio" id="answer" name="answer17" value="109"/>
<input type="radio" id="answer" name="answer15" value="104"/>
i found this function here
function findSelection(field) {
var test = document.getElementsByName(field);
var sizes = test.length;
alert("Size is " + sizes);
for (i=0; i < sizes; i++) {
if (test[i].checked==true) {
alert(test[i].value + ' you got a value');
return test[i].value;
}
}
}
var radioinputs = findSelection("answer");
But I do not know what to change so I can make it work with me properly
You can structure like this:
function findSelection(field) {
var test = document.getElementsByClassName(field);
var sizes = test.length;
//alert("Size is " + sizes);
result = [];
// result[16]=107;
// result[17]=109;
// result[15]=104;
for (i=0; i < sizes; i++) {
var index = test[i].dataset.index;
if(test[i].checked == true){
result[index] = test[i].value;
}else{
result[index] = undefined; // for a answer doesn't have a value
}
}
return result;
}
function checkfunction(){
var radioinputs = findSelection("radioanswer");
console.log(radioinputs);
console.log(radioinputs[15]);
};
<form id="form1">
<input type="radio" class="radioanswer" name="answer16" data-index="16" value="107"/>
<input type="radio" class="radioanswer" name="answer17" data-index="17" value="109"/>
<input type="radio" class="radioanswer" name="answer15" data-index="15" value="104"/>
<button type="button" onclick="checkfunction();"> Check </button>
</form>
A class can has multiple instances, but id has only one! And you can see document about data attributes here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
From the looks of it you have a dynamic name field, i.e. name="answer2", name="answer3", etc. Because of that your query document.getElementByName(field) will not find a field matching "answer".
To remedy this either get rid of the dynamic name or if you really need it then I would say add a class to all those radio buttons and use document.getElemenetsByClassName.
I am trying to loop a radio-button form but with no success.
Despite the length of the form is 3 (same as number of radiobuttons) I can not access individual elements.
The purpose is to change the text. Its works If I want to access the first element:
var child = form.firstChild;
alert(child.nextSibling.nextSibling.nextSibling.innerHTML);
this returns the first radiobutton text.
But if I create a loop out of this
function getRadioBInfo() {
var form = document.getElementById("myform");
for (var i = 0; i < form.length; i++) {
var iForm = form[i];
var child = iForm.firstChild;
alert(child.nextSibling.nextSibling.nextSibling.innerHTML);
}
}
.. I get I TypeError: child is null
What is wrong with this code?
HTML
<form action="" name="deliver_form" id="myform" style="display: block;">
<input type="radio" name="delivering" id="radio1" value="deliver"> <label>label1</label><br>
<input type="radio" name="delivering" value="comeandtake"> <label>label2</label><br>
<input type="radio" name="delivering" value="express"> <label>label3</label>
</form>
I think you are looking for something like following.
var form = document.getElementById("myform");
for (var i = 0; i < form.length; i++) {
var child = form.getElementsByTagName('input')[i];
alert(child.nextSibling.nextSibling.innerHTML);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" name="deliver_form" id="myform" style="display: block;">
<input type="radio" name="delivering" id="radio1" value="deliver"> <label>label1</label><br>
<input type="radio" name="delivering" value="comeandtake"> <label>label2</label><br>
<input type="radio" name="delivering" value="express"> <label>label3</label>
</form>
Since you've tagged jquery, you could use:
$('[name=delivering']).each( function() {
alert( $(this).find('label').html() );
});
To get the label followed after the radio button you could try this:
function getRadioBInfo() {
var form = document.getElementById("myform");
var radios = form.querySelectorAll('input[type=radio]');
var i;
for (i = 0; i < radios.length; i++) {
var radio = radios[i];
console.log(radio.nextSibling.innerHTML);
}
}
getRadioBInfo();
pitfall: there shouldn't be whitespace between the radio or the button. Otherwise nextSibling returns text and not the label
demo
Why you are not getting by name
Try this
function getRadioBInfo() {
var arrRadioBtns = document.getElementsByName("delivering");
for (var i = 0; i < arrRadioBtns.length; i++) {
var btn = arrRadioBtns[i];
alert (btn.value);
}
}
Working Example
form[i] contains only radio buttons.If You want to take the labels Try using
var lbl = document.getElementsByTagName('label');
for (var i=0;i < lbl.length; i++){ lbl[i].innerHTML = 'radio' + i; }
and loop through the labels and change the text
Couple of observation
var form = document.getElementById("myform");
form will not be an array,Instead it will be a String,So you are iteration of the string.length;
You can use doucment.getElementsByName to get all radio buttons with common name
Hope this snippet will be useful
function getRadioBInfo() {
//Retun collection of radio button with same name
var _getRadio = document.getElementsByName("delivering");
// loop through the collection
for(var i = 0;i<_getRadio.length;i++){
//nextElementSibling will return label tag next to each radio input
console.log(_getRadio[i].nextElementSibling.innerHTML)
}
}
getRadioBInfo();
Jsfiddle
Given a grid with 5 columns and an array of the IDs in column 2 how do you set the boolean value of column 1 to true for the IDs in the array? There are 25 rows and 5 of the rows are in the array.
var ProductIDArray = [2,5,9,12,16];
var i;
for (i = 0; i < ProductIDArray.length; i++) {
document.getElementById("chk").checked = true;
}
First mistake: you can't/shouldn't have duplicate IDs on the page. Either use classes, or make those IDs unique for each element.
Second mistake: you need to check different element each time in the loop.
Based on this:
Column 1 is a checkbox column. Only the ones in the array should have the checkbox checked. The other rows shouldn't have column 1 checked.
Let's try to fix it. Assuming that your checkbox IDs are chk_N where N is the number that matches the product ID (chk_1, chk_2, etc...), the code should look like this:
var ProductIDArray = [2,5,9,12,16];
var i;
for (i = 0; i < ProductIDArray.length; i++) {
document.getElementById("chk_" + ProductIDArray[i]).checked = true;
}
Here's an example:
var ProductIDArray = [2, 5, 9, 12, 16];
var i;
for (i = 0; i < ProductIDArray.length; i++) {
document.getElementById("chk_" + ProductIDArray[i]).checked = true;
}
<input type="checkbox" id="chk_11" />11<br>
<input type="checkbox" id="chk_2" />2<br>
<input type="checkbox" id="chk_33" />33<br>
<input type="checkbox" id="chk_45" />45<br>
<input type="checkbox" id="chk_65" />65<br>
<input type="checkbox" id="chk_5" />5<br>
<input type="checkbox" id="chk_16" />16<br>
<input type="checkbox" id="chk_9" />9<br>
<input type="checkbox" id="chk_12" />12<br>
...
I have three checkboxes. I am already using a piece of code I found here to uncheck the other two when one is checked.
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
I use this inside the checkbox to toggle the state: onchange="cbChange(this)".
However, I also need to provide for a situation where I don't want any of the boxes ticked. While I can do this by adding a separate button or checkbox, I wanted to know if the above code can be modified or another function added that will allow to untick the already ticked box by an onclick event.
I tried adding this function (again found here) but it won't work:
function cbUncheck(obj)
{
if (obj.checked == false)
{
document.getElementByClassName("cb").checked = false;
}
}
I use this in the checkbox code: onclick="cbUncheck(this);"
Suggestions welcome!
Thanks!
you need to check first checkbox checked or not..
if checkbox is not checked then dont need to do anything
otherwise uncheck other checkboxes
<input id="chk1" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk1" >1</label>
<input id="chk2" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk2" >1</label>
<input id="chk3" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk3" >1</label>
javascript
function cbChange(obj) {
if(obj.checked)
{
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
}
JS BIN JSBIN EXAMPLE
You can use radio buttons so that only one can be selected (no script required for that). Then if some other condition occurs, clear both (below uses a button as an example):
<form>
<input type="radio" name="foo" value="0">zero<br>
<input type="radio" name="foo" value="1">one<br>
<button type="button" onclick="clearRadios(this.form.foo)">Clear radios</button>
</form>
And the function:
function clearRadios(radioGroup) {
for (var i=0; i<radioGroup.length; i++) {
radioGroup[i].checked = false;
}
}
If you don't want users to check the radios at all, disable them.
This below code simply give solutions to what you need.
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
for working demo see jsfiddle
Here I have written a javascript which selects all checkboxes on checking one checkbox and I want to display all the checked checkboxes value on button click. here it does selectall function correctly(ie. it selects all checkboxes). I am new to javascript and I need some help to display all the checked check box values, can any any one provide me the code to select all checkbox by clicking on a check box and display values of only selected checkboxes in a single function using javascript only...
Here is the javascript code
<script>
var checked=false;
function checkedAll ()
{
var c = document.getElementsByName("viju");
checked = document.getElementById('causelist_month').checked;
for (var i =0; i < c.length; i++)
{
c[i].checked=checked;
}
}
</script>
Here the HTML code
<input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
<input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
<input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
<input type="Button" value="Show values" onClick="checkedAll(this.value)"/>
Jsfiddle http://jsfiddle.net/2UFdc/
HTML
<form>
<input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
<input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
<input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
<input type="Button" value="Show values" onClick="showVal(this.form)"/>
</form>
Javascript
var checked = false;
function checkedAll() {
var c = document.getElementsByName("viju");
checked = document.getElementById('causelist_month').checked;
for (var i = 0; i < c.length; i++) {
c[i].checked = checked;
}
}
function showVal(frm) {
var arr = [];
for (var i in frm.viju) {
if (frm.viju[i].checked) {
arr.push(frm.viju[i].value);
}
}
alert(arr);
return arr
}
First, use the event listener for the checkboxes rather than onClick:
document.getElementById("causelist_month").addEventListener('change', function(){
checkboxes = document.getElementsByName("viju");
for( var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = this.checked;
}
}, false);
And for the display of the checked items, in HTML:
<input type="Button" value="Show values" onClick="displayChecked()"/>
<div id="display"></div>
Then, in javascript:
function displayChecked (){
var display = "";
checkboxes = document.getElementsByName("viju");
for( var i=0; i<checkboxes.length; i++){
if( checkboxes[i].checked ){
display += " " + checkboxes[i].value;
}
}
document.getElementById("display").innerHTML = display;
}
you could use jquery functions
dont forget to inclde jquery library
<button id="showall"> display </button>
`
$("#showall").click(function() {
var array = [];
$(':checkbox:checked').each(function(i){
array[i] = $(this).val();
});
$.each( array, function( i, val ) {
$("#display").append(val); //the div where you want to display
});
});
`
<!DOCTYPE html>
<html>
<script>
var checked=false;
function checkedAll()
{
var c = document.getElementsByName("viju");
var checkboxesChecked = [];
// loop over them all
for (var i=0; i<c.length; i++) {
// And stick the checked ones onto an array...
if (c[i].checked) {
checkboxesChecked.push(c[i]);
}
}
if(document.getElementById('causelist_month').checked)
{
checked = document.getElementById('causelist_month');
checkboxesChecked.push(checked);
}
for (var j=0; j<checkboxesChecked.length; j++) {
// iterate the pushed values
alert(checkboxesChecked[j].value);
}
}
</script>
<body>
<form>
<input type="checkbox" name="causelist_month" id="causelist_month" value="select all/unselect all" onclick="checkedAll ();">select all/unselect all
<input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
<input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
<input type="Button" value="Show values" onClick="checkedAll(this.value)"/>
<form>
</body>
</html>
This displays all the list of check boxes in the alert message one by one. please check