Initially set all checkboxes to checked - javascript

I have jquery code that has the ability to set all checkboxes to 'checked' state on the click of a 'check all' checkbox. However, I would like to initially, start a html page by already having all checkboxes checked without having to click on that 'check all' checkbox. Please bear in mind, though, that I would like to keep the 'check all' checkbox since it has the ability to uncheck all checkboxes as well.
Here's my jquery code :
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});

If you want to have all your checkboxes checked the moment the page is loaded without the need to click anything, use:
$(document).ready(function(){
$("input:checkbox").prop("checked", "true");
});
Or just generate your HTML input tag like so:
<input type="checkbox" checked="checked" />
Hope this helps!

You could place your checkAll function outside of your click function, call it once the page load and when you click on the check all button
$(document).ready(function(){
checkAll(true);
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
checkAll(chk)
});
function checkAll(isCheck){
$('.chk_boxes1').attr('checked',isCheck);
}
})
I also like #Univ approach.

Change your original function to:
$('.chk_boxes').click(chkAll());
Create a new function:
function chkAll(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
}
Call the new function when document are ready:
$(document).ready(function(){
chkAll();
})

I would just use html attributes
<input name="name" id="id" type="checkbox" checked="checked">
I wouldn't recommend using javascript to set these initial values because it will unnecessarily waste resources in the client machines.

Related

How can I have a checkbox as selected in Javascript?

I have some items to be selected,they are checkboxes with their certain titles in a table. I want to onclick on an item(I mean each "td") then the function do its job but besides I want the checkbox of that selected "td" t be checked. How can I do it with javascript?
note:I am learning javascript so please don't answer with a jquery solution.
the code below is an example of each items
<td id="1" onclick="chb('1')" ><input type="checkbox" />title</td>
This is pure JS to select a check box. You need to give your check box an Id (for example 'check1') and run the below code inside the function you call in the click event.
document.getElementById("check1").checked = true;
Actually I didn't understand what you told. But i think you want the checkbox to be checked already. Then use checked in <input> Like this : <input type="checkbox" checked>or You can use document.getElementById("check1").checked = true;

jquery how to make checkbox always checked

How can I make a checkbox always be checked, with Jquery 1.4.2 ?
This is my html output from the struts application:
<input type="checkbox" name="helloThere" value="on">
I tried:
$(document).ready(function() {
$('#helloThere').attr('checked', 'checked');
});
JSFIDDLE
http://jsfiddle.net/96p4zg9w/ this shows the current code, I would need the checkbox to load checked.
The props property is not available in JQUERY 1.4.2
your jquery selector is wrong.
You are trying select an element with 'helloThere' id, but your input has not an id attribute.
You can add this attribute to your input field or change jquery selector.
Try one of this tow solutions:
<input type="checkbox" name="helloThere" id="helloThere" value="on">
or
$(document).ready(function() {
$("input[name='helloThere']").attr('checked', 'checked');
});
You need to put your JavaScript inside $(document).ready(). This ensures all of the content you might want to touch has been loaded before you try to change it.
In your scenario then, you would need:
$(document).ready(function() {
$('#helloThere').attr('checked', 'checked');
});
Edit: Your checkbox doesn't have an ID. You need to add an ID of "helloThere" for $('#helloThere') to pick it up. Your fiddle also needs to have jQuery loaded using the menu on the left. Here's a working version: http://jsfiddle.net/96p4zg9w/1/
Check this jsfiddle for a working example of how you can do it using javascript.
If you want to use versions of jQuery below 1.5, you need to do it this way:
$("#checkbox").attr("checked", true);
or
$("#checkbox").attr("checked", "checked");
If you want to select element using the name instead of id, use:
input[name='helloThere']
Hope it useful!
It can be done in three ways. You can use checked in input that will always stay checked.
<input id="myId" type="checkbox" name="name" checked>
Using prop and assume input id is myId
$(document).ready(function() {
$(#myId).prop('checked', true);
});
Before jQuery 1.6 using attr
$(document).ready(function() {
$(#ID).attr('checked','checked');
});
<lable>this will always be checked, even you try to uncheck</lable>:
<input type="checkbox" checked onclick="return false;">

Hide a button until check box is checked, without ID

I need to hide a button until a check box is clicked, however I am stepping into someone elses code who used tag libraries that did not define ID in the button tag. Here is what I have:
The button code:
<html:button name="Next" value="BTN.NEXT" styleClass="button" localeCd="<%= localeCd %>" onClick='Submit("Next")'/>
The checkbox code:
<input type="checkbox" name="fedCheck" onclick="checkFed(this, 'myNext')" value="y" />
The Javascript Code
function checkFed(ele, id) {
x = document.getElementById(id);
if (ele.checked == true) x.disabled = false;
else x.disabled = true;
}
I can get this to work in a seperate page but the page that it is on does not allow for the button to have an ID so it crashes every time. Any suggestions?
There would be better ways of doing this, listening for the click event, etc... but, to simply modify your code see this jsFiddle (note: this assumes this is the only element named "Next"):
function checkFed(ele, name) {
x = document.getElementsByName(name)[0];
x.disabled = !x.disabled
}
And change the onclick="checkFed(this, 'myNext')" to:
onclick="checkFed(this, 'Next')"
And add disabled="true" to the button so that it's initial state is disabled
...also note that this doesn't actually hide it like the title asks, it disables it, like the content of the question seems to ask.
Instead of finding the button using document.getElementById, use document.querySelector.
For example, if you have a single button on the page with "Next" as the value of its name attribute:
document.querySelector('button[name="Next"]')

Prevent nested label link from following, but change checkbox state

I have an issue where I have the following markup:
<input type="checkbox" id="foo" />
<label for="foo">
<a href="http://www.google.com">
Checkbox text
</a>
</label>
The label has a nested anchor in case the user doesn't have javascript enabled, and in which case they will follow the link when clicking the label.
I have the following javascript/jQuery to prevent the link click and to show an alert when the checkbox state has changed:
$(function(){
$("label a").click(function(e){
e.preventDefault();
});
$("#foo").change(function(){
alert("checkbox changed");
});
});
-- See Example --
However when clicking the label the checkbox checked state isn't changed.
I'm aware I could hack the code and try and emulate the native browser functionality by adding code to set the checked status, however I would prefer to use the native functionality than emulate it.
How can I get the checkbox to change state without following the link, and without setting the checked state using javascript?
bit confused here and without setting the checked state using javascript?...
but i think you are talking about trigger()...
$("label a").click(function(e){
var $foo = $("#foo");
$foo.attr("checked", !$foo.attr("checked"));
$foo.trigger('change');
return false;
});
fiddle

select all checkboxes command jquery, javascript

I'm trying to get all of my checkboxes to be checked when clicking a link
looks like this: select all
inputs in a loop: <input type="checkbox" name="delete[$i]" value="1" />
jquery code:
var checked_status = this.checked;
$("input[name=delete]").each(function() {
this.checked = checked_status;
});
Can someone help me get it to check all.. ?
When clicking at the select all link, nothing seems to happen.. (not even an error)
Try the following.
Updated. The handler is tied to an anchor therefore there will be no this.checked attribute available.
$("#select_all").click(function(){
$("input[name^=delete]").attr('checked', 'checked');
});
jQuery Tutorial: Select All Checkbox
You're going to want to use the [name^=delete] selector ("starts with"), since your checkboxes names aren't exactly "delete", they're "delete[X]' for some number X.

Categories