Show/hide based on checkbox - javascript

I have code to see if any checkboxes are checked, it's working. Here's where I'm usure, after it sees that none are checked, checked I want to have a DIV show up (hide/show I guess) somwhere and disappear if any of the boxes are checked.
function checkBoxValidate(cb) {
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") = false) {
document.views.checkbox[j].checked = false;
}
}
}
----------
<form name="myform">
<input class="checkbox" name="1" type="checkbox" value="check_1" onclick="document.getElementById('r-click').innerHTML = '1;" id="click">
1
<input class="checkbox" name="2" type="checkbox" value="check_2" onclick="document.getElementById('s-click').innerHTML = '2';" id="click">
2
</form>
<div id=showInstructions>Check boxes</div>
Thanks!

Added a few lines of code to your original code to demonstrate:
(btw, the whole "eval" thing is kinda messy and could be written much simpler...)
function checkBoxValidate(cb) {
var somethingIsChecked = false;
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") = false) {
document.views.checkbox[j].checked = false;
}
else {
somethingIsChecked = true;
}
if (somethingIsChecked)
document.getElementById("showInstructions").style.display = "block";
else
document.getElementById("showInstructions").style.display = "none";

function checkBoxValidate(cb) {
var noneChecked = true;
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") == false) {
document.views.checkbox[j].checked = false;
} else {
noneChecked = false;
}
}
document.getElementById("showInstructions").style.display = noneChecked ? "block" : "none";
}

Related

How to check if function inserted innerHTML correctly in js?

I'm writing code for myself to set values into an array based on which checkboxes are checked.
There is one function for setting innerHTML of the checkbox (checked or unchecked) and second one for changing the value of an array based on the condition if checkbox is checked or not.
The HTML code looks like this:
function check(id) {
if (id.innerHTML == "unchecked") {
id.innerHTML = "checked";
} else {
id.innerHTML = "unchecked";
}
}
function audiences() {
var audiencesLength = [];
var checkboxes = [];
for (var i = 0; i < 3; i++) {
checkboxes.push(document.getElementById("aud" + i).innerHTML)
}
for (var j = 0; j < 3; j++) {
if (checkboxes[j] != "unchecked") {
switch (j) {
case 0:
audiencesLength[j] = 1;
break;
case 1:
audiencesLength[j] = 3;
break;
case 2:
audiencesLength[j] = 7;
break;
}
} else {
audiencesLength[j] = 0;
}
}
}
<li class="checkboxes">
<label class="checkbox-container">1
<input type="checkbox">
<span class="checkmark" id="aud0" onclick="check(this)">unchecked</span>
</label>
<label class="checkbox-container">3
<input type="checkbox">
<span class="checkmark" id="aud1" onclick="check(this)">unchecked</span>
</label>
<label class="checkbox-container">7
<input type="checkbox">
<span class="checkmark" id="aud2" onclick="check(this)">unchecked</span>
</label>
</li>
It works until I start to check the checkboxes fast. Then some of them are correct and some of them have values "checked" when unchecked and some of them "unchecked" when checked.
Is there a way to prevent this? Or is there any problem in the code?
Thanks!
Because you only binding event to span, which won't work if you're click on label nor input. Instead, you should use onchange on input, this will affect both label of it and itself
function check(element) {
id = document.getElementById(element)
if (id.innerHTML == "unchecked") {
id.innerHTML = "checked";
} else {
id.innerHTML = "unchecked";
}
}
function audiences() {
var audiencesLength = [];
var checkboxes = [];
for (var i = 0; i < 3; i++) {
checkboxes.push(document.getElementById("aud" + i).innerHTML)
}
for (var j = 0; j < 3; j++) {
if (checkboxes[j] != "unchecked") {
switch (j) {
case 0:
audiencesLength[j] = 1;
break;
case 1:
audiencesLength[j] = 3;
break;
case 2:
audiencesLength[j] = 7;
break;
}
} else {
audiencesLength[j] = 0;
}
}
}
<li class="checkboxes">
<label class="checkbox-container">1
<input onchange="check('aud0')" type="checkbox">
<span class="checkmark" id="aud0">unchecked</span>
</label>
<label class="checkbox-container">3
<input onchange="check('aud1')" type="checkbox">
<span class="checkmark" id="aud1">unchecked</span>
</label>
<label class="checkbox-container">7
<input onchange="check('aud2')" type="checkbox">
<span class="checkmark" id="aud2">unchecked</span>
</label>
</li>

How to pass a value from one function to another

var boxes = document.getElementsByName('toggle');
function markPreceding() {
var curIndex = null;
for (var j = 0; j < boxes.length; j++) {
if (boxes[j].checked) {
curIndex = j;
}
}
}
function checkInputs() {
for (var k = 0; k <= curIndex.length; k++) {
boxes[k].checked = true;
}
}
for (var i = 0; i <= boxes.length; i++) {
boxes[i].onchange = markPreceding;
boxes[i].onchange = checkInputs;
}
<input type="checkbox" id="product-1" name="toggle">
<input type="checkbox" id="product-2" name="toggle">
<input type="checkbox" id="product-3" name="toggle">
<input type="checkbox" id="product-4" name="toggle">
<input type="checkbox" id="product-5" name="toggle">
Have a problem passing this "curIndex" value to checkInputs function.
This should check inputs before checked input and get its value to do it.
Only ES5 synthax needed for this project.
EDIT: The ES5 Syntax way
const boxes = document.getElementsByName('toggle');
boxes.forEach(function(box, I) {
box.onclick = function(e) {
markPreceding(i);
};
});
function markPreceding(i) {
for (var j = 0; j < boxes.length; j++) {
if(j <= i) {
document.getElementById('product-' + (j + 1)).checked = true;
} else {
document.getElementById('product-' + (j + 1)).checked = false;
}
}
}
ORIGINAL:
Try using this:
const boxes = document.getElementsByName('toggle');
boxes.forEach((box, i) => {
box.onclick = (e) => {
markPreceding(i);
};
});
function markPreceding(i) {
for (var j = 0; j < boxes.length; j++) {
if(j <= i) {
document.getElementById(`product-${j + 1}`).checked = true;
} else {
document.getElementById(`product-${j + 1}`).checked = false;
}
}
}
For some reason, there seems to be an issue with updating the inputs through the NodeList array returned by document.getElementsByName. Not sure why, but this code has been verified. See working example here.

How can I uncheck all the checkboxes?

I'm trying to give an option for the user to select another way to proceed with the operation, and they are needed to select just one checkbox for each radio. So how can I get uncheck all the checkbox if the number of checkboxes selected overpass 1?
function testaCheck(idMaster){
var inputs,i,checados=0;
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="checkbox"){
if(inputs[i].checked==true){
checados++;
document.getElementsByName('DS_MD'+idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
}
}
if(checados>1){
alert("Só pode haver um item selecionado.");
document.getElementsByTagName(inputs.checked=false);
return ;
}
};
<label class="input-control radio">
<input type="radio" name="idMAWB" id="idMAWB" value="<%=ID_CD_MAWB%>" onClick="selecionaMAWB(this.value)">
<span class="helper"><%=DS_MAWB%></span>
</label>
<label for="DS_MD<%=ID_CD_MAWB%>">
<input type="checkbox" name="DS_MD<%=ID_CD_MAWB%>" id="masterDireto<%=ID_CD_MAWB%>" onClick="testaCheck(<%=ID_CD_MAWB%>)">
<span class="helper"> <%=ID_CD_MAWB%> </span>
</label>[layout test][1]
Link: [1]: https://i.stack.imgur.com/ynIAR.png
You should format your code correctly
function testaCheck(idMaster) {
var inputs, i, checados = 0;
inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
checados++;
document.getElementsByName('DS_MD' + idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
if (checados > 1) {
uncheckAll(inputs);
}
}
}
};
function uncheckAll(inputItems){
alert("Só pode haver um item selecionado.");
for (i = 0; i < inputItems.length; i++) {
inputItems[i].checked = false;
}
}
You need to use prop() to set your checkbox.
here is my demo
$("#Allcheck").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
function testaCheck(idMaster) {
var inputs, i, checados = 0;
inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
checados++;
document.getElementsByName('DS_MD' + idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
}
}
if (checados > 1) {
uncheckAll(inputs);
document.getElementsByName('DS_MD' + idMaster).value = null;
$("#formSelectMAWB").find("#masterDireto").val(null);
}
};
function uncheckAll(inputItems){
alert("Só pode haver um item selecionado. Favor refazer a seleção");
for (i = 0; i < inputItems.length; i++) {
inputItems[i].checked = false;
}
}
Thanks for help, here is my final code, where all check can be unchecked and value is set null before uncheck.

JavaScript check all and uncheck all for checkbox

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
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 = checktoggle;
}
}
}
</script>
<form name="myform">
<li>
<label class="cba">
Check All |
UnCheck All
</label>
</li>
<li>
<input class="cba" type="checkbox" name="content1" value="1"<?php checked('1', $slct); ?>/>
</li>
<li>
<input class="cbc" type="checkbox" name="content2" value="2"<?php checked('2', $copy); ?>/>
</li>
<li>
<input class="cbx" type="checkbox" name="content3" value="3"<?php checked('3', $cut); ?>/>
</li>
</form>
I have made the toggle option for the checkbox check all and uncheck all. Still now check all and uncheck all is not working I get the error in console while viewing in Firebug. Here is the screenshot I attached.
I am not sure what was my mistake:
Any suggestion would be great.
Your syntax is incorrect. Your missing the .forms so it should look like this
document.forms[formName].getElementsByTagName("input");
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
Finally based on #Mark Walters Suggestion I Correct the problem. Here is the One I changed based on his suggestion.
Thanks for all your Help. Happy Day
Javascript function to toggle (check/uncheck) all checkbox.
function checkAll(bx)
{
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++)
{
if(cbs[i].type == 'checkbox')
{
cbs[i].checked = bx.checked;
}
}
}
function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
Have that function be called from the onclick attribute of your checkbox to check all.
<input type="checkbox" onclick="checkAll(this)">
Try this:
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.form.myform.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
For specific checkboxes, you can use this:
function checkBoxes(pForm, boxName) {
for (i = 0; i < pForm.elements.length; i++)
if (pForm.elements[i].name == boxName)
pForm.elements[i].checked = pForm.elements[i].checked ? false : true;
}

Javascript for showing a div using the div's class name

I have a div in my page like that,
<div class="errormsg" style="display: none;">Username is empty</div>
i am having an input field like this,
<input type=textbox id="userid" />
Now i need a javascript for showing the error message div if input field was empty. I need to use the div class rather than id. Please help.
P.S : I don't want Jquery as my page has some restriction to use library files.
Try this, assuming only one errormsg div -
Update
I've added a fiddle here. Plus, there was a typo - corrected
<div class="errormsg" style="display: none;">Username is empty</div>
<input type=textbox id="userid" onchange="validate()" />
function validate(){
var userId = document.getElementById('userId'),
errorMsg = document.getElementsByClassName('errormsg').item();
if (userId.value === ''){
errorMsg.style.display = 'block'
} else {
errorMsg.style.display = 'none';
}
}
<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />
function getElementsByClassName(className) {
// For IE
if (document.all) {
var allElements = document.all;
} else {
var allElements = document.getElementsByTagName("*");
}
var foundElements = [];
for (var i = 0, ii = allElements.length; i < ii; i++) {
if (allElements[i].className == className) {
foundElements[foundElements.length] = allElements[i];
}
}
return foundElements;
}
function call(control)
{
var userid=document.getElementById('userid');
var errorMsg = getElementsByClassName('errormsg')[0];
if(userid.value == '')
{
errorMsg.style.display = "block";
}
else
{
errorMsg.style.display = "none";
}
}
Removed the JQuery and added the Javascript code as below:
<div class="errormsg">Username is empty</div>
<input type='textbox' id="userid" onkeyup="javascript:call(this);" />
function getElementsByClassName(className) {
// For IE
if (document.all) {
var allElements = document.all;
} else {
var allElements = document.getElementsByTagName("*");
}
var foundElements = [];
for (var i = 0, ii = allElements.length; i < ii; i++) {
if (allElements[i].className == className) {
foundElements[foundElements.length] = allElements[i];
}
}
return foundElements;
}
function call(control)
{
var userid=document.getElementById('userid');
var errorMsg = getElementsByClassName('errormsg')[0];
if(userid.value == '')
{
errorMsg.style.display = "block";
}
else
{
errorMsg.style.display = "none";
}
}

Categories