We Keep Coding

Number of checked checkboxes

How to rewrite this code from jQuery to vanilla JavaScript? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.
$(function () {
var countChecked = function () {
var n = $("input:checked").length;
$(".output").text(n);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
});
What should I do next?
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
function countIt() {
for (var i = 0; i < box.length; i++) {
if ( box[i].checked ) {
great++
par.innerHTML = great;
return
}
}
}
}

You need to reset the great variable each time you count (for example by moving it inside the countIt function).
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
function countIt() {
var great = 0;
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
great++;
}
}
par.innerHTML = great;
}
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
}
You can also move the countIt function definition out of the loop and the same with innerHTML setting.

Disable table using checkbox

I have this checkbox, how to disable a table (disable all the input fields in the table) whenever I check the checkbox?
<label><input type="checkbox" name="view" value="d">N/A</label>
Is it possible using purely JavaScript and not jQuery.
This is the code now
var elems = document.getElementById('table-id').querySelectorAll('input,select,textarea');
document.getElementById('check').onchange = function () {
if (document.getElementById('check').checked) {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
} else {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = false;
}
}
}
and the table
<table id='table-id' border="1">
but it shows error like this:
Uncaught TypeError: Cannot read property 'querySelectorAll' of null

Using jQuery, it is easy:
$("#tableId").find(":input").prop("disabled", true);
Using Javascript, it is a little longer:
var elems = document.getElementById('tableId').querySelectorAll('input,select,textarea');
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
Fiddle: http://jsfiddle.net/abhitalks/6s7QL/2/
Update:
Added your checkbox code:
document.getElementById('checkboxId').onchange = function () {...

Here is the pure JavaScript version to do the trick you want:
var table = document.getElementById('tableId'),
inputs = table.getElementsByTagName('input'),
checkbox = document.getElementById('checkboxId');
checkbox.onchange = function(e) {
if(checkbox.checked) {
disableTable(true);
} else {
disableTable(false);
}
}
function disableTable(disableState) {
for (var i = 0, l = inputs.length; i < l; i++) {
inputs[i].disabled = disableState;
}
}
And here is the working example in JSFiddle.

Is it possible to delete/remove an entire "select" element, after you've emptied the options with .remove()?

Like, after you've emptied it with this:
var select = document.GetElementById("selector");
var length = select.options.length;
for (i = 0; i < length; i++) {
select.remove(select.options[i]);
}
Is it possible to remove the entire node by using:
select.parentNode.ChildNodes[1].remove();
afterwards, keeping in mind that I have the function remove() somewhere else, as followed:
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = 0, len = this.length; i < len; i++) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
This doesn't seem to work for me. I can empty the select, but not remove it.

Try this:
var select = document.getElementsByTagName('select')[0];
if (select.parentNode.removeNode)
select.parentNode.removeNode(select);
else
select.parentNode.removeChild(select);
Demo

set first check box checked and others disable from checkbox list in clientside

I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}

If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.

$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});

Validation of Checkbox in Listview Control by Jquery/Javascript?

I am trying to validate the checkbox which is one of the items in ListView control.
I have the button to check so I define the ClientClick function on the button and wrote JavaScript code.
But It didn't work. Display the lstViewtest object null.
function btnclick() {
var listview = document.getElementById('<%=
lstviewtest.FindControl("tableItem").ClientID %>');
for (var i = 0; i < listview.rows.length; i++) {
var inputs = listview.rows[i].getElementsByTagName('input');
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type === "checkbox" || inputs[j].type === "checkboxsend")
if (inputs[j].checked)
return true;
}
alert("Please select at least one");
return false;
}
}