List of checkboxes not getting selected - javascript

I have a checkbok as selectAll
Select All
<input class="all-select" type="checkbox" value="" name="">
i also have a list of friends with a checkbox each which is populated dynamically.
<ul>
<li><span><img src="img.src" ></span><strong>Name</strong>
<br />Email
<input name="" type="checkbox" value="" class="chk-box">
</li>.....</ul>
when i click the select all checkbox, then all the checkboxes of my list should get selected, the javascript code for which is given below :
$("#slide_top_pop").on("click", ".all-select", function (event) {
if ($(this).is(':checked')) {
$('input.chk-box').attr('checked', true);
} else {
$('input.chk-box').attr('checked', false);
}
});
Now the problem is this that when i first time select the Select All check box then the list get selected but when i unchecked it and check again then the list is not selected and when i tried to verify it on Mozilla what is the checked property(attribute) for the list then i get this :
<input class="chk-box" type="checkbox" value="" name="" checked="checked">
which says that the checkbox is selected but i cant see the selected tick in the list.
I dont understand what the problem is .
any solution is appreciated thanks.

Use .prop() instead of .attr() like:
$("#slide_top_pop").on("click", ".all-select", function (e) {
$('input.chk-box').prop('checked', this.checked);
});

Related

Find a selector and update

I have a three different radio buttons and based on the selection of the radio button I would like to capture which radio button the user clicked and store that in a hidden input textbox for later use.
Here is the code I have tried, which doesn't seem to be working:
//clicked on first radioButton:
$('#Employee').change(function () {
if (this.checked) {
$('#multi').show();
$('#Type').attr("EmployeeSelected");
}
});
//clicked on second radioButton:
$('#Employer').change(function () {
if (this.checked) {
$('#multi').show();
$('#Type').attr("EmployerSelected");
}
});
My page looks like this:
<fieldset id="multi" class="fieldset-auto-width">
<legend>
Selected Form
</legend>
<form action="/PostToDb" method="post">
<input type="text" name="Type" value="xx" />
<div>
......................
</div>
</form>
How do I update the textbox to whichever radio button is selected?
$("input:radio[name=emp]").change(function () {
if ($(this).val()==0) {
$("input:text").val('first radio');
}else if ($(this).val()==1) {
$("input:text").val('second radio');
}else if ($(this).val()==2) {
$("input:text").val('third radio');
}
});
FIDDLE
$('#Employer')--> when using # you will be selecting id as for . it is for class and so on.
$('#Type').attr("EmployerSelected"); to assign a text to input use val() as $('#Type').val("EmployerSelected"); meaning the element with id Type will have the value EmployerSelected
Try replacing .attr() with .val() and use the correct selector as follows:
$('[name="Type"]').val("EmployerSelected");
Try add id attribute to the input box,as
<input id="Type" type="text" name="Type" value="xx" />
hope helpful.

CheckAll/UncheckAll checkbox with jQuery

I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.
I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo
Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]
You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')

How to get previous checkbox value and compare

I am trying to create a checkbox limit based on a value change example: I have the following checkbox!
If the value of a checked checked box is different then the previous prompt an alert!
Some of the check boxes do have the same value. Not all of them!
Example:
<input name="" type="checkbox" value="here">(if this was checked)
<input name="" type="checkbox" value="here">(then this)
<input name="" type="checkbox" value="there">(would not allow prompt alert)
<input name="" type="checkbox" value="here">(would allow)
<input type="checkbox" name="checkbox2[]" onClick="setChecks(this)" value="`key`=<?php
echo $rspatient['key']?>" class="chk" id="chk<?php echo $a++?>" />
I have code that limits the number of checkboxes but I'm not sure how to compare previous values to the selected.
You probably want to make use of the prev() and next() jQuery functions. I don't understand well enough what you want to do, but something like $(':checkbox').change(function() { $(this).prev(); //this references the previous sibling }) would get you started
Maybe something like
$('input:checkbox').change(function() {
if ($(this).attr('checked') && $(this).prev().attr('checked') && $(this).attr('value') != $(this).prev().attr('value')) {
alert('you can't do that');
}
});
But like I said, i don't know what you're trying to do

jQuery Store Values of checkboxes in div

How can I get this list of checkboxes to be added to a div prior to their selected state, so if they are selected, they should be added to the div, if not they are removed from the list if not selected.
<div id="selected-people"></div>
<input type="checkbox" value="45" id="Jamie" />
<input type="checkbox" value="46" id="Ethan" />
<input type="checkbox" value="47" id="James" />
<input type="checkbox" value="48" id="Jamie" />
<input type="checkbox" value="49" id="Darren" />
<input type="checkbox" value="50" id="Danny" />
<input type="checkbox" value="51" id="Charles" />
<input type="checkbox" value="52" id="Charlotte" />
<input type="checkbox" value="53" id="Natasha" />
Is it possible to extract the id name as the stored value, so the id value will be added to the div instead of the value - the value needs to have the number so that it gets added to a database for later use.
I looked on here, there is one with checkboxes and a textarea, I changed some parts around, doesn't even work.
function storeuser()
{
var users = [];
$('input[type=checkbox]:checked').each(function()
{
users.push($(this).val());
});
$('#selected-people').html(users)
}
$(function()
{
$('input[type=checkbox]').click(storeuser);
storeuser();
});
So you want to keep the DIV updated whenever a checkbox is clicked? That sound right?
http://jsfiddle.net/HBXvy/
var $checkboxes;
function storeuser() {
var users = $checkboxes.map(function() {
if(this.checked) return this.id;
}).get().join(',');
$('#selected-people').html(users);
}
$(function() {
$checkboxes = $('input:checkbox').change(storeuser);
});​
Supposing you only have these input controls on page I can write following code.
$.each($('input'), function(index, value) {
$('selected-people').append($(value).attr('id'));
});
Edited Due to More Description
$(document).ready(function() {
$.each($('input'), function(index, value) {
$(value).bind('click', function() {
$('selected-people').append($(value).attr('id'));
});
});
});
Note: I am binding each element's click event to a function. If that doesn't work or it isn't a good for what you are supposed to do then change it to on "change" event.
Change:
users.push($(this).val());
to:
users.push($(this).attr('id'));
This is for to bind the comma seperated values to input checkbox list
$(".chkboxes").val("1,2,3,4,5,6".split(','));
it will bind checkboxes according to given string value in comma seperated.

JavaScript: How to detect if an HTML checkbox was selected?

How do I:
detect if an HTML checkbox has be clicked/selected?
retrieve which checkbox(es) have been selected?
Example code:
<FORM ACTION="...">
<INPUT TYPE=CHECKBOX VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="4+">4+ bedrooms<P>
</FORM>
Meaning,
if the web user selects "1 bedroom", I want an event to fire to inform me the user selected "1 bedroom".
As you can see, a user can select multiple checkboxes. For example, they might want to see homes that have either "1 bedroom" or "2 bedrooms". So they would selected both checkboxes. How do I retrieve the checkbox values when multiple checkboxes have been selected?
In case it helps, I would be open to using JQuery to simplify this.
jQuery to the rescue! (since you tagged it as such):
$('input:checkbox[name=bedrooms]').click(function() {
var values = $('input:checkbox[name=bedrooms]:checked').map(function() {
return this.value
}).get();
// do something with values array
})
(make sure to add a name="bedrooms" attribute in the html for your checkboxes; you'll need them when submitting the form anyway, in order to retrieve them on the server).
I've used a few pseudo-selectors:
"input:checkbox" finds all the input checkboxes on the page
"[name=bedrooms]" finds all the elements with attribute name="bedrooms"
":checked" finds all the elements with attribute checked=true
Combine them as "input:checkbox[name=bedrooms]:checked" and jQuery gives you all the checked checkboxes.
For each one I pluck out their value attribute into an array you can simply iterate over and do what you wish.
Edit
You can optimize this code to save a reference to your checkboxes instead of telling jQuery to go fetch them all everytime there's a click:
var $checkboxes = $('input:checkbox[name=bedrooms]');
$checkboxes.click(function() {
var values = $checkboxes
.filter(function() { return this.checked })
.map(function() { return this.value })
.get();
// do something with values array
})
In this sample I've saved the checkboxes into var $checkboxes. On click of any checkbox, instead of going back to the DOM to grab the checked ones, we simply filter $checkboxes down to only the checkboxes that are checked, and for each one pluck out the value attribute into an array. The get() is just an obscure requirement to convert the "jQueryized" array to a regular JavaScript Array.
1) Use the onclick attribute.
2) You could give them each the same name and use $('input[name=yourname]:checked') to get them all.
[Edit] as requested, here's an SSCCE.
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(init);
function init() {
// Add onclick function to every checkbox with name "bedrooms".
$('input[name=bedrooms]').click(showCheckedValues);
}
function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
alert(checked);
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
<input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
<input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
<input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
</form>
</body>
</html>
<form name="myForm">
<input type="checkbox" name="myCheck"
value="My Check Box"> Check Me
</form>
Am I Checked?
This is from a textbook called JavaScript in 10 Easy Steps or Less by Arman Danesh - so i'd assume this works. hope it helps
Assign names and/or IDs to your checkbox elements so that you can distinguish them in code. Then, using jQuery, add events with bind if you want to handle the check/uncheck state changes.
Use IDs on your checkbox.
<FORM ACTION="...">
<INPUT TYPE=CHECKBOX id="c1" VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX id="c2" VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX id="c3" VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX id="c4" VALUE="4+">4+ bedrooms<P>
</FORM>
$('c1').checked // returns whether the 1 bedroom checkbox is true or false
You can use the .checked property on a checkbox to retrieve whether a checkbox has been checked. To fire an event when a checkbox is checked, you can use the click event in jquery. Something like the below would work to list all checkboxes on the page that have been checked.
$("input[type='checkbox']").click(function() {
// if you want information about the specific checkbox that was clicked
alert("checkbox name : " + $(this).name + " | checked : " + $(this).checked);
// if you want to do something with ALL the checkboxes on click.
$.each($["input[type='checkbox']", function(i, checkEl) {
// put any of your code to do something with the checkboxes here.
alert("checkbox name : " + checkEl.name + " | checked : " + checkEl.checked);
});
});
You can use events to see if a checkbox was selected (onChange). You can read more about it at the Essential Javascript tutorial (see the section entitled: Javascript is an Event Driven Language)
Markup:
...<input type="checkbox">...
detect if an HTML checkbox has be clicked/selected?
a: using jQuery 1.7+:
$(function(){
$("input").click(function () {
console.log($(this)[0].checked);
});
});
retrieve which checkbox(es) have been selected?
a: again using jQuery 1.7+:
console.log($('input:checked'));
Hope this helps.
If you do not want to use JQuery you could always use
document.GetElementById("cbxCheckbox1");

Categories