We Keep Coding

How can I remove the last checkbox from an array using vanilla javascript

This is an email preferences form with a bunch of checkboxes (16) to allow users to subscribe/unsubscribe.
I have a collection of checkboxes like this;
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
I have a button which when clicked will select all checkboxes on the page and then deselect the unsubscribeAll checkbox;
getAllButton.addEventListener("click", function () {
selectAll();
});
function selectAll() {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox") checkboxes[i].checked = true;
}
// un-check the unsubscribeAll checkbox
unsubscribeAll.checked = false;
}
I have a checkbox which when clicked(checked) will deselect all of the other checkboxes on the page;
var unsubscribeAll = document.getElementById("unsubscribeAll");
unsubscribeAll.addEventListener("click", function () {
// un-check this box if already checked
if (this.checked !== true) {
this.checked = false;
} else {
deselectAll();
}
});
function deselectAll() {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox") checkboxes[i].checked = false;
}
unsubscribeAll.checked = true;
}
This is all working perfectly. However, my problem is that if the the unsubscribeAll checkbox is checked and the user then selects a checkbox to subscribe to an email I want to deselect the unsubscribeAll checkbox but I'm struggling to make that happen.
I thought I would be able to run another function that would deselect that checkbox like this;
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("click", deselectUnsubscribeAll);
}
function deselectUnsubscribeAll() {
if (unsubscribeAll.checked === true) {
unsubscribeAll.checked = false;
}
}
Of course, this doesn't work because unsubscribeAll is included in the checkboxes[] array.
Next, I thought I would be able to create a new array of checkboxes that excluded unsubscribeAll so I tried this because it's the last element in that array;
var unsubscribeAll = document.getElementById("unsubscribeAll");
var getAllButton = document.getElementById("select-all");
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
console.log(checkboxes.length); // 16
var popped = checkboxes.pop(); // Uncaught TypeError: checkboxes.pop is not a function
As you can see, that generates an error but I don't understand why. This seems like clunky code but it almost works.
This is one of the pages that I referenced to solve my problem;
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop#examples
I need some direction please.

You say it's the last element in that array, so why do you loop through the end of array and not using for (var i = 0; i < checkboxes.length - 1; i++)?
And then you can add an event listener separately to that.
You can also use Element.matches() API to check if the clicked checkbox is unsubscribeAll and run appropriate functions accordingly. But the first method is more efficient cause you don't need to check for the element on each click event.

How do I can go over an grid asking if a checkbox is checked using jQuery?

i have a grid with data colection and every row have a checkbox, i need ask: if any checkbox is not checked, show an alert message.
my code is:
var count = 0;
$('#checkableGrid').find("input:checkbox:is(:checked)").each(function () {
count++;
});
if (count == 0) {
alert("must check any item");
return false;
};

you have incorrect selector to target all input checkbox:
if(!$('#checkableGrid').find("input:checkbox:checked").length){
alert("must check any item");
return false;
};

Javascript check if radio button was checked?

I have found scripts that do it, but they only work with one radio button name, i have 5 different radio button sets. How can i check if its selected right now i tried on form submit
if(document.getElementById('radiogroup1').value=="") {
alert("Please select option one");
document.getElementById('radiogroup1').focus();
return false;
}
does not work.

If you have your heart set on using standard JavaScript then:
Function definition
var isSelected = function() {
var radioObj = document.formName.radioGroupName;
for(var i=0; i<radioObj.length; i++) {
if( radioObj[i].checked ) {
return true;
}
}
return false;
};
Usage
if( !isSelected() ) {
alert('Please select an option from group 1 .');
}
I'd suggest using jQuery. It has a lot of selector options which when used together simplify the much of the code to a single line.
Alternate Solution
if( $('input[type=radio][name=radioGroupName]:selected').length == 0 ) {
alert('Please select an option from group 1 .');
}

var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
if (radio.checked) {
checked = true;
break;
}
}
if (!checked) {
alert("Please select option one");
radios.focus();
return false;
}
return true;

A very simple function is:
<script type="text/javascript">
function checkRadios(form) {
var btns = form.r0;
for (var i=0; el=btns[i]; i++) {
if (el.checked) return true;
}
alert('Please select a radio button');
return false;
}
</script>
<form id="f0" onsubmit="return checkRadios(this);">
one<input type="radio" name="r0"><br>
two<input type="radio" name="r0"><br>
three<input type="radio" name="r0"><br>
<input type="submit">
</form>
However, you sould always have one radio button selected by default (i.e. with the select attribute), some user agents may automatically select the first button. Then you just need to check if the default (usually the first one) is checked or not.

Why don't just use a oneliner?
I wrote this code, it will submit the form if at least one radio is checked:
(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item')
Otherwise it will make an alert. Or you may also modify it to use with form's onsubmit:
return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item')
Just replace form_name and radio_name accordingly.
See how it works: http://jsfiddle.net/QXeDv/5/

Here's a good tutorial -> http://www.somacon.com/p143.php
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj) return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked) return radioObj.value;
else return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) return radioObj[i].value;
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj) return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true;
}
}

Are you ok with jquery? If so:
$(document).ready(function(){
if($('input[type=radio]:checked').length == 0)
{
alert("Please select option one");
document.getElementById('radiogroup1').focus();
return false;
}
}

Check Input text if empty based upon radio button selected

I have two radiobuttons in a group on my page. Based upon radiobutton selected i want to generate an alert.
var d=GetVal();
function GetVal()
{
var a = null;
var f = document.forms[0];
var e = f.elements["radiogroup"];
for (var i=0; i < e.length; i++)
{
if (e[i].checked)
{
a = e[i].value;
break;
}
}
return a;
}
At the time of form validation, It is always returning only first radiobutton value when iam reading it in if else loop.
if (!checkRadio("form","radiogroup"))
{
alert("none of the option was selected");
return false;
}
//if one radio option was selected
else
{
if(d="firstradiovalue"){
alert("first radio selected");
return false;}
else{
if(d="secondradiovalue"){
alert("second radio Selected");
return false;}
}
}
At the time of form submission, even if i choose second option i only get alert - "first radio selected". Any help. Thx in advance.

You need to use == not =:
if(d == "firstradiovalue"){
alert("first radio selected");
The return value of the expression d = "firstradiovalue" is d itself, which is always true.

How to check if radio button in radio button list was selected

Good morning
I am having some difficuly in looping through a radiobutton list in order to check if it was selected or not using Javascript.
With C# Asp.net the procedure is relatively easy but with the Javascript I am struggling a little.
This is the code I use with C# to check if the radion button was selected.
protected void Button1_Click(object sender, EventArgs e)
{
string radValue = RadioButtonList1.SelectedValue.ToString();
if (radValue == "")
{
lblError.Text = "Please select neigbourhood";
}
else
{
lblError.Text = "You come from " + radValue;
}
}
The code I use with javascript is a little faulty and I was hoping it could be corrected.
var radNeighbourhood;
for(var loop=0; loop < document.subscribeForm.myRadio.length; loop++)
{
if(document.subscribeForm.myRadio[loop].checked == true)
{
radNeighbourhood = document.subscribeForm.myRadio[loop].value;
break;
}
else
{
alert("Please select a neigbourhood");
return false;
}
}
return true;
Kind regards
Arian

I made a small sample of what you 're asking here. http://jsfiddle.net/mZhQ9/2/
EDIT: analysis
var radioButtons = document.subscribeForm.myRadio; //it is crucial to store the DOM information in a variable instead of grabbing it, each single time. (DOM operations are EXTREMELY slow)
var len = radioButtons.length; //same as before
var found = false; //our flag - whether something was found or not
while( len-- > 0 ) { //decreasing the counter (length of radio buttons)
if( radioButtons[len].checked === true ) { //if we find one that is checked
found = true; //set the flag to true
break; //escape the loop
}
}
if( found ) { //if our flag is set to true
alert( radioButtons[len].value );
return radioButtons[len].value; //return the value of the checked radiobutton (remember, when we broke from the While-loop, the len value remained at the 'checked' radio button position)
}
else {
alert( "Please select a neigbourhood" );
return false; //else return false
}
EDIT 2: As a sidenote please be careful of using
"for(var loop=0; loop < document.subscribeForm.myRadio.length; loop++)"
DOM operations within a loop. the
loop < document.subscribeForm.myRadio.length condition checks the document and grabs the radio buttons every single time, resulting in lots of unecessary overhead.

You might be looking for something more like:
var radNeighbourhood;
for (var loop=0; loop < document.subscribeForm.myRadio.length; loop++)
{
if (document.subscribeForm.myRadio[loop].checked == true)
{
radNeighbourhood = document.subscribeForm.myRadio[loop].value;
break;
}
}
if (!radNeighbourhood)
{
alert("Please select a neighbourhood");
return false;
}
alert("You come from " + radNeighbourhood);
return true;