Not able to remove values from array after uncheck in checkboxes - javascript

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>

Related

How to grey out unchecked checkbox labels when checkbox is clicked?

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>

JQuery "onchange" event on just one checkbox among multiple in a group based on label text

I have a group of checkboxes as -
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.
I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.
$("#check_1").change(function() {
alert('Checkbox One is clicked');
});
How do I do this as I have no access to modify the html ?
You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,
$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
alert('Checkbox One is clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Looks like your only criteria is the text of the label so you could target the input based on that label like :
$('label:contains("One")').prev('input:checkbox').change(function(){
console.log('One changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Hope this helps.

P Element copy to Input value and just one select

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">

Disable radio button according to selected choice

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.

How to add value of checked checkbox to textarea using jQuery?

How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4
Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle
You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.

Categories