Develop Reference

Checkbox: Enable button if checkbox checked

In my page have a modal window, in the modal i have 2 checkboxes, i want if all checkboxes selected enabled send button and change background color (if disabled bgcolor is gray else bgcolor red). How i can it right way ?
HTML:
<form action="" method="POST" class="send-modal-data">
<input type="text" id="send_email" name="subscribe-email" class="modal-input" placeholder="Email *" required="required">
<div class="checkboks custom-sq vdc-cb-area">
<input type="checkbox" id="box4" name="vdc-modal-cb" class="checked-checkbox"/>
<label for="box4" class="checkboks-text d-flex align-center"><?php echo the_field('vdc_checkbox_txt', 'option'); ?></label>
</div>
<div class="checkboks custom-sq vdc-cb-area">
<input type="checkbox" id="box7" name="vdc-modal-cb" class="checked-checkbox" />
<label for="box7" class="checkboks-text d-flex align-center"><?php echo the_field('vdc_checkbox_text_2', 'option'); ?></label>
</div>
<div class="success-msg">
<div class="msg"></div>
</div>
<input type="submit" name="subscribe-form" id="vdc-send-modal" class="danger-btn send-subscribe" disabled="disabled" value="<?php echo the_field('lets_get_started', 'option'); ?>"></input>
</form>
JS:
var checks = document.getElementsByName('vdc-modal-cb');
var checkBoxList = document.getElementById('vdc-cb-area');
var sendbtn = document.getElementById('vdc-send-modal');
function allTrue(nodeList) {
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].checked === false) return false;
}
return true;
}
checkBoxList.addEventListener('click', function(event) {
sendbtn.disabled = true;
if (allTrue(checks)) sendbtn.disabled = false;
console.log(123);
});
NOTE: I took this example from the stack overflow but it doesn't work for me

1.You should use getElementsByClassName to get elements with the same class.
2.To add eventListener to the class elements, you should iterate over the elements.
var checks = document.getElementsByName('vdc-modal-cb');
var checkBoxList = document.getElementsByClassName('vdc-cb-area');
var sendbtn = document.getElementById('vdc-send-modal');
function allTrue(nodeList) {
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].checked === false) return false;
}
return true;
}
for (var i = 0; i < checkBoxList.length; i++) {
checkBoxList[i].addEventListener('click', function(event) {
sendbtn.disabled = true;
if (allTrue(checks)) sendbtn.disabled = false;
});
}

How can I add input value in js array without cloning values?

I have simple js script that adds input values in array after clicking on input, it works as expected except that it duplicates values every time I'm clicking on another input, i.e. I click on input with value 5, array now is ["5"] then I click on input with value 4 and after that array is ["5", "5", "4"]. I've tried if statement with check on e.target but it didn't help. How can I add only input value on which I click, not all checked input values? Here is the link on pen. My HTML markdown:
<div>
<input type="checkbox" value="5">
<input type="checkbox" value="4">
<input type="checkbox" value="3">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
</div>
<p></p>
And JS code:
let checkboxes = document.getElementsByTagName('input');
let checkboxesChecked = [];
let p = document.getElementsByTagName('p');
function getCheckedCheckBoxes(e) {
if (e.target.checked == true) {
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i].value);
console.log(checkboxesChecked)
}
}
p[0].innerHTML = checkboxesChecked;
return checkboxesChecked;
}
};
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getCheckedCheckBoxes);
}
Any help and tips would be appreciated.

You need to reset the array each time and you should not just update it when checked.
let checkboxes = document.getElementsByTagName('input');
let checkboxesChecked = [];
let p = document.getElementsByTagName('p');
function getCheckedCheckBoxes(e) {
checkboxesChecked.length = 0;
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i].value);
console.log(checkboxesChecked)
}
}
p[0].innerHTML = checkboxesChecked;
return checkboxesChecked;
}
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getCheckedCheckBoxes);
}
<div>
<input type="checkbox" value="5">
<input type="checkbox" value="4">
<input type="checkbox" value="3">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
</div>
<p></p>
Personally I would use querySelectorAll
let checkboxes = document.getElementsByTagName('input');
let checkboxesChecked = [];
let p = document.getElementsByTagName('p');
function getCheckedCheckBoxes(e) {
checkboxesChecked = Array.from(document.querySelectorAll("input:checked")).map(cb => cb.value)
p[0].innerHTML = checkboxesChecked;
}
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getCheckedCheckBoxes);
}
<div>
<input type="checkbox" value="5">
<input type="checkbox" value="4">
<input type="checkbox" value="3">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
</div>
<p></p>
With your comments.... which still does not make sense with checkboxes, they should be buttons.
let checkboxes = document.getElementsByTagName('input');
let checkboxesChecked = [];
let p = document.getElementsByTagName('p');
function getCheckedCheckBoxes(e) {
if (e.target.checked) checkboxesChecked.push(e.target.value)
p[0].innerHTML = checkboxesChecked;
}
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getCheckedCheckBoxes);
}
<div>
<input type="checkbox" value="5">
<input type="checkbox" value="4">
<input type="checkbox" value="3">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
</div>
<p></p>

You've said you want it to add the number that was clicked each time it's clicked to become checked, so if I click 5 (on) it's ["5"], then if I click it again (off) there's no change, and if I click it a third time we add "5" again for ["5", "5"]. If so:
function getCheckedCheckBoxes(e) {
if (e.target.checked) {
checkboxesChecked.push(e.target.value);
}
p[0].innerHTML = checkboxesChecked;
return checkboxesChecked;
}
Live Example:
let checkboxes = document.getElementsByTagName('input');
let checkboxesChecked = [];
let p = document.getElementsByTagName('p');
function getCheckedCheckBoxes(e) {
if (e.target.checked) {
checkboxesChecked.push(e.target.value);
}
p[0].innerHTML = checkboxesChecked;
return checkboxesChecked;
}
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getCheckedCheckBoxes);
}
<div>
<input type="checkbox" value="5">
<input type="checkbox" value="4">
<input type="checkbox" value="3">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
</div>
<p></p>

javascript disable checkbox when another checkbox is checked with same name [duplicate]

I have a group of check boxes with same name, what I need is when I click any one of them, other checkboxes must get disabled. how should I apply Javascript over it?
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
Please help...

You could do
$('input').attr('disabled',true);
...if you really need it. But you might be better off using radio buttons.
Try the demo

<script type="text/javascript">
for (i=0; i<document.test.finallevelusers.length; i++){
if (document.test.finallevelusers[i].checked !=true)
document.test.finallevelusers[i].disabled='true';
}
</script>
probably you want them enabled again when user uncheck the checkbox
for (i=0; i<document.test.finallevelusers.length; i++){
if (document.test.finallevelusers[i].disabled ==true)
document.test.finallevelusers[i].disabled='false';
}

<script type="text/javascript">
function disableHandler (form, inputName) {
var inputs = form.elements[inputName];
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = function (evt) {
if (this.checked) {
disableInputs(this, inputs);
}
else {
enableInputs(this, inputs);
}
return true;
};
}
}
function disableInputs (input, inputs) {
for (var i = 0; i < inputs.length; i++) {
var currentInput = inputs[i];
if (currentInput != input) {
currentInput.disabled = true;
}
}
}
function enableInputs (input, inputs) {
for (var i = 0; i < inputs.length; i++) {
var currentInput = inputs[i];
if (currentInput != input) {
currentInput.disabled = false;
}
}
}
</script>
</head>
<body>
<form name="aForm" action="">
<p>
<label>
<input type="checkbox" name="finallevelusers[]" value="1">
</label>
<label>
<input type="checkbox" name="finallevelusers[]" value="1">
</label>
<label>
<input type="checkbox" name="finallevelusers[]" value="1">
</label>
</p>
</form>
<script type="text/javascript">
disableHandler(document.forms.aForm, 'finallevelusers[]');
</script>

Hope This solution helps you-
your DOM could be something like this :
<div class="checkboxes">
<input type="checkbox" name="sameCheck" class="checkbox" id="1" onchange="checkChange()">
<input type="checkbox" name="sameCheck" class="checkbox" id="2" onchange="checkChange()">
<input type="checkbox" name="sameCheck" class="checkbox" id="3" onchange="checkChange()">
<input type="checkbox" name="sameCheck" class="checkbox" id="4" onchange="checkChange()">
</div>
And your logic is this :
let checkbox = document.querySelectorAll('.checkbox')
let b = false;
function checkChange(){
b = !b
if(b){
for(let i = 0 ; i< checkbox.length; i++){
if(checkbox[i].checked === false){
checkbox[i].disabled = 'true';
}
}
}else{
for(let i = 0 ; i< checkbox.length; i++){
checkbox[i].removeAttribute('disabled');
}
}
}

Try code like this
<script>
function uncheck(){
for(var ii=1; ii<=4; ii++){
if(document.getElementById("q6_"+ii).checked==true){
document.getElementById("q6_"+ii).checked=false;
}
}
}
</script>

Javascript check/uncheck all checkboxes and write values to textarea

This is my first js script so be gentle with me :)
The problem is when I click on check all button, all checkboxes are checked but it won't write values to textarea, if I click individual checkboxes then the value is added/removed and that is ok, I'm just stuck on that check all/uncheck all button.
http://jsfiddle.net/LAcgE/74/
function check(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function uncheck(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
var itemsAdded = Array();
function movetext(text) {
var i = itemsAdded.indexOf(text)
if ( i >= 0) {
itemsAdded.splice(i,1);
}
else {
itemsAdded.push(text);
}
document.getElementById("result").value=itemsAdded.join("\n");
}
<form action='#' method='post'>
<input type='checkbox' value='aaa' name="add" onclick='movetext(this.value)'/>a
<input type='checkbox' value='bbb' name="add" onclick='movetext(this.value)'/>b
<input type='checkbox' value='ccc' name="add" onclick='movetext(this.value)'/>c
<input type='checkbox' value='ddd' name="add" onclick='movetext(this.value)'/>d
<input type='checkbox' value='eee' name="add" onclick='movetext(this.value)'/>e
<input type="button" value="check all" onClick="check(this.form.add)">
<input type="button" value="uncheck all" onClick="uncheck(this.form.add)">
<textarea id="result" rows="8" cols="40"></textarea>
<input type="submit" value="Submit">
</form>

Replace your check and uncheck functions with this
function check(chk) {
for (i = 0; i < chk.length; i++)
{
chk[i].checked = true ;
movetext(chk[i].value);
}
}
function uncheck(chk) {
for (i = 0; i < chk.length; i++)
{
chk[i].checked = false ;
movetext(chk[i].value);
}
}
You just have to manually call the other method. I tried it in your fiddle.

You forget to call movetext() function in check() and uncheck() function.
Add this after you do check/uncheck:
movetext(chk[i].value);

Validation on radio button

my validation is work on only one radio button and all left radio button its not working here is my code
<script>
function xyz()
{
var x = document.getElementsByName("red");
//alert(x.length);
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}else{
alert("fe");
return false;
}
}
}
</script>
<form name="as" method="post" action="n.php">
<input type="radio" id="x1" name="red">
<input type="radio" id="x2" name="red">
<input type="radio" id="x3" name="red">
<input type="radio" id="x4" name="red">
<input type="submit" value="button" onclick="return xyz()">
</form>

You should try this.
function xyz()
{
var x = document.getElementsByName("red");
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}
}
// No radio button checked, return false.
return false;
}

Your function will return in either states after first run. To skip to next element of iteration you should use continue instead of return. See: http://www.w3schools.com/js/js_break.asp. To iterate threw all elements you shoul do:
for (var i=0; i<x.length; i++) {
if (x[i].checked) {
// Do something if checked
} else {
// Do something if not checked
alert("fe");
}
// Continue to next element
}

Try the following code:
<script type="text/javascript">
function validate()
{
var checked = null;
var inputs = document.getElementsByName('correct');
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked) {
checked = inputs[i];
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else
{
return confirm('Save As Correct Answer '+checked.value+'');
}
}
</script>
<form method="post" name="Form" onsubmit="return validate()" action="">
<input type="radio" name="correct" id="correct" value="A">
<input type="radio" name="correct" id="correct" value="B">
</form>