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;
Related
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.
I have some jquery code where I am trying to select a checkbox when the user clicks on a div. My fiddle is below:
http://jsfiddle.net/5PpsJ/
What i have come up with is this, but it is not selecting the checkbox inside of the span:
$('span[name="' + current + '"]').closest('input:checkbox[id="CB_Selected"]').prop('checked', true);
The full code is in the link
My question is how can i get the select box inside of the span based on its unique name and select it?
n.b I have commented out the hide functio0n in jquery to visually see whether the checkbox is selected or not
EDIT
My ID's are the same because I am working inside of ASP.NET and using a repeater to create the HTML shown in the fiddle. Inside of Repeaters I can not set the ID of item as the Repeater control does not allow me to set the ID with Eval(datasource)
IDs are unique. All you need is this:
$("#CB_Selected").prop('checked', true);
Actually, you don't even need jQuery:
document.getElementByID('CB_Selected').checked = true;
As others have pointed out, it would be preferred to use a class rather than an ID if there are multiple checkboxes. In addition, an input cannot have children, so the closest function won't work; did you mean find (for children) or siblings?
Instead of giving several checkboxes the same ID -- which invalidates your html -- use a class on the checkboxes. Change:
<input id="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
To:
<input class="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
Then you can use the code:
$('#s_' + this.id).find(':checkbox.CB_Selected').prop('checked', true);
Is there any way that I can get "Enable Recruiters to directly contact me" in Javascript or JQuery when the checkbox checked?
I know I can get the value easily, but how about the text beside that which can be in a lable?
<input type="checkbox" name="rec" id="rec" value="ON"><label for='rec'>Enable Recruiters to directly contact me</label>
Please let me know if you need more clarification!
You can bind the change event and use the event source object to call next on it to get the label next to checkbox.
Live Demo
$('#rec').change(function(){
if(this.checked)
alert($(this).next().text())
})
Im trying to dynamically check a checkbox using JQuery 1.5, based on something the user selects from a dropdown list. When the list changes it returns to this function:
function displaySystemResults(html){
var v = html.split(",");
document.getElementById('fUpdateSystemName').value = v[0];
if (v[1] == "true"){
alert("true");
$('#fUpdateActiveFlag').setAttribute('checked','checked');
}
}
Here is the dropdown list:
<td valign="top"><form:checkbox path="fUpdateActiveFlag"
name='fUpdateActiveFlag' value="checked" /> </td>
I can't get the checkbox to put a tick in the box. Can anyone spot what im doing wrong? I know its hitting the setAttribute method as the alert box is displaying when it should be set to true.
$('#fUpdateActiveFlag') is the ID selector.
add it to your checkbox
<td valign="top"><form:checkbox ID="fUpdateActiveFlag" path="fUpdateActiveFlag"
name='fUpdateActiveFlag' value="checked" /> </td>
Also, jQuery function is incorrect. setAttribute is the JavaScript function, while it looks like you're using jQuery selector, hence the object you select is jQuery object, which does not have a method called setAttribute, instead, use .attr():
$('#fUpdateActiveFlag').attr('checked','checked')
see working example http://jsfiddle.net/ruslans/8xp9g/
Edit: as per #Dementic 's comment below, you can keep using the name attribute, but then you'll have to change your selector to:
$('[name="fUpdateActiveFlag"]').attr('checked','checked');
see working example: http://jsfiddle.net/ruslans/A4D8f/
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.