I am looping through a structure outputting an undefined number of checkboxes - I am looking for a way to grey out the labels of unchecked checkboxes once 1 has been checked
I have seen a number of examples of disabling the checkboxes but that's not what I need as I want the option for multiple checkboxes to be checked for a tag filtering system
being quite new to JS I don't really know where to begin with this
Does anyone have any suggestions or can recommend any resources/ documentation?
var label = document.getElementsByTagName('label');
var checkbox = document.getElementsByTagName('input[type=ckeckbox]');
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
Here is my solution for your problem
var label = document.getElementsByTagName('label');
var checkboxes = document.querySelectorAll("input");
checkboxes.forEach(check => check.addEventListener("change", grayout.bind(null,check)))
function grayout(box) {
if(!Array.from(checkboxes).some(checkbox => checkbox.checked)) return checkboxes.forEach(checkbox => checkbox.parentElement.style.color = "black");
checkboxes.forEach(checkbox => {
if(checkbox.checked) return checkbox.parentElement.style.color = "black";
checkbox.parentElement.style.color = "grey";
})
}
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
If you don't mind having the checkboxes greyed out when no one is checked, you can easily do it with the :checked CSS pseudo-class
<style>
.greyCheckbox+label {
color: grey;
}
.greyCheckbox:checked+label {
color: black;
}
</style>
<input class="greyCheckbox" type="checkbox" value="" id="chk1" />
<label for="chk1">
Label Here
</label>
<input class="greyCheckbox" type="checkbox" value="" id="chk2" />
<label for="chk2">
Label Here
</label>
<input class="greyCheckbox" type="checkbox" value="" id="chk3" />
<label for="chk3">
Label Here
</label>
<input class="greyCheckbox" type="checkbox" value="" id="chk4" />
<label for="chk4">
Label Here
</label>
Demo here: https://jsfiddle.net/4hc5dyvk/
Otherwise you can bind the changed event and apply a new class once the first checkbox has been applied.
I think you are looking for this:
// select all labels and checkboxes
var label = document.querySelectorAll('label');
var checkbox = document.querySelectorAll('input[type="checkbox"]');
// iterate to each checkbox
checkbox.forEach((cb, i)=>{
// bind clicking event
cb.addEventListener('click', ()=>{
if(cb.checked){
// click
checkbox.forEach(cbb=>{
if(cbb !== cb){
// uncheck all others
cbb.checked = false;
}
});
// set the checked to black
label[i].style.color = 'black';
// iterate the labels
label.forEach((lb, k)=>{
if(k !== i){
// set labels other than current one to grey
lb.style.color = 'grey';
}
})
}else{
// unclick
// set the unchecked label to grey
label[i].style.color = 'grey';
}
});
})
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
Here is the simplest solution from your perspective:
// select all labels and checkboxes
var label = document.querySelectorAll('label');
var checkbox = document.querySelectorAll('input[type="checkbox"]');
checkbox.forEach(item => {
item.addEventListener('click', event => {
if(item.checked){
item.parentElement.style.color='grey';
}
else{
item.parentElement.style.color='black';
}
})
})
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
Related
If I have a radio button group, how can I set the checked property for a given value?
For example
<input type="radio" name="group" value="one" checked>
<input type="radio" name="group" value="two">
If I then wanted to check the second radio button with value 'two' through script, how?
This is what you expect?
<input type="radio" name="group" value="one" checked />
<input type="radio" name="group" value="two" />
<script>
const elements = document.getElementsByTagName('input');
for (const element of elements) {
if (element.value === 'two') {
element.checked = true;
}
}
</script>
You first need to create unique IDs for both radio inputs.
<input type="radio" name="group" value="one" id="inputOne"checked>
<input type="radio" name="group" value="two" id="inputTwo">
Then you can simply set the checked value to true.
document.getElementById("inputTwo").checked = true;
I have a requirement where all the checked values in checkboxes should be displayed in a textarea. This part works perfectly fine, but the problem occurs when I uncheck the checkbox unchecked element is not getting removed from the array. I have used jquery each function as shown in double quotes.
$("input:checkbox[name=category]:checked").each(function() {
As per my understanding, the above function will check for only checked values and updates into the array, so if any value is unchecked and this function is called, the unchecked value should be removed isn't it?
var pc = [];
function check(){
$("input:checkbox[name=category]:checked").each(function(){
pc.push(decodeURI($(this).val()));
});
pc = $.unique(pc);
document.getElementById("result").value = pc.join("\n");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload ="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()" >
<textarea id="result"></textarea>
The above snippet highlights the issue,where if i uncheck any checkbox,the value is not getting removed from array.
Please correct me if i am doing anything wrong?
Please help me!
Thanks in advance
it could be helpful to you what I had changed here is the variable creation var pc=[] inside the check()
function check(){
var pc = [];
$("input:checkbox[name=category]:checked").each(function(){
pc.push(decodeURI($(this).val()));
});
pc = $.unique(pc);
document.getElementById("result").value = pc.join("\n");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload ="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()" >
<textarea id="result"></textarea>
Move the array to inside the function, otherwise you're accumulating all the values from all previous clicks.
And in fact, .map() would be nicer than .each() so that you build the array while iterating. And you don't need the $.unique operation, which I assume was an attempt at a solution.
function check() {
var pc = $("input:checkbox[name=category]:checked").map(function() {
return decodeURI($(this).val());
}).toArray();
document.getElementById("result").value = pc.join("\n");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()">
<textarea id="result"></textarea>
And here's a native JS solution.
function check() {
const vals = Array.from(
document.querySelectorAll("input[type=checkbox][name=category]:checked"),
el => decodeURI(el.value)
);
document.getElementById("result").value = vals.join("\n");
}
<body onload="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()">
<textarea id="result"></textarea>
i wanted to push the list of values selected from the checkbox to the text box that already has the array list of values......i mean when the data is been retrieved the textbox has its value (the retrieved value with the checkbox being checked)......when i select the new checkbox value and push that to the retrieved value.....the textbox only displays the newly selected checkbox values(the old checkbox values get removed)..........i want the textbox to display the old retrieved values with the currently selected checkbox values with checkbox being checked
var pc = [];
function getPc(myname1) {
var text1 = myname1;
if (document.getElementById(myname1).checked){
pc.push(myname1);
}
else
{
pc.splice( pc.indexOf(myname1), 1 );
}
console.log(pc);
document.getElementById("pca").value = pc.join("/");
}
<body onload="getpc()">
<p>Product Categories</p>
<input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)" >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >
When the page loads check which checkboxes are checked and add them to the array.
var pc = [];
var checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox") {
if (checkboxes[i].checked) {
getPc(checkboxes[i].id);
}
}
}
function getPc(myname1) {
var text1 = myname1;
if (document.getElementById(myname1).checked) {
pc.push(myname1);
} else {
pc.splice(pc.indexOf(myname1), 1);
}
console.log(pc);
document.getElementById("pca").value = pc.join("/");
}
<body>
<p>Product Categories</p>
<input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)" >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >
First name repeats and other names can not be selected, where is the problem?
Also, how do I make the choice just one name?
function copyTextValue(bf) {
if(bf.checked)
var text1 = document.getElementById("names").innerHTML;
else
text1='';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
<b>Names</b><hr/>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>James</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Emre</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Kate</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Berkay</p>
<hr/><b>Form</b><hr/>
<input id="Name2">
<input id="Name3">
https://jsfiddle.net/emresaracoglu/LL5ukynq/
You have used id attribute with same ids so it will not work. so you need to set id with different value and pass it in function.
function copyTextValue(bf,selector) {
if(bf.checked)
var text1 = document.getElementById(selector).innerHTML;
else
text1='';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
<b>Names</b><hr/>
<input type="radio" name="check1" onchange="copyTextValue(this,'names1');"/><p id='names1'>James</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names2');"/><p id='names2'>Emre</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names3');"/><p id='names3'>Kate</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names4');"/><p id='names4'>Berkay</p>
<hr/><b>Form</b><hr/>
<input id="Name2">
<input id="Name3">
I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?
There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson
Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.
You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.