Develop Reference

Programmatically change checked of a checkbox

I have the following two checkboxes:
<input type="checkbox" id="id3"></input>
<input type="checkbox" id="id4"></input>
the desired behaviour is that when i click on id3, id4 should adopt.
that works fine for the first and second click but aftwerwards not anymore. any idea why?
here my script:
<script>
function test2()
{
var checked = this.checked;
if(checked)
$("#id4").attr("checked", "checked");
else
$("#id4").removeAttr("checked");
}
$("#id3").click(test2);
</script>
(or a working dojo here http://dojo.telerik.com/eviTi)

Please use prop rather than attr and it's advisable to use change event on checkbox instead of the click event.
attr does DOM manipulation but prop just changes the internal property of any DOM
<script>
function test2()
{
var checked = this.checked;
if(checked)
{
$("#id4").prop("checked", "checked");
}
else
$("#id4").prop("checked", false);
}
$("#id3").change(test2);
</script>

Use change event(not click) and play with .prop method instead of .attr
Reason: Where both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value/checkedness of the input. [Ref]
function test2() {
$("#id4").prop("checked", this.checked);
}
$("#id3").change(test2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" id="id3">
<input type="checkbox" id="id4">

Use .prop() instead of .attr()
as like this
function test2()
{
var checked = this.checked;
if(checked)
$("#id4").prop("checked", "checked");
else
$("#id4").removeAttr("checked");
}
$(document).ready(function(){
$("#id3").click(test2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="id3"></input>
<input type="checkbox" id="id4"></input>

Use .prop() instead of .attr()
function test2()
{
var checked = this.checked;
if(checked)
{
$("#id4").prop("checked", "checked");
}
else
$("#id4").removeAttr("checked");
}

I changed your code but the problem is attr(). Use prop() instead
$("body").on("change","#id3",function(){
if($(this).is(":checked")){
$("#id4").prop("checked","checked");
} else{
$("#id4").removeProp("checked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="id3"></input>
<input type="checkbox" id="id4"></input>

You can simply use
function test2()
{
var checkBox = $("#id4");
checkBox.prop("checked", !checkBox.prop("checked"));
}
$("#id3").click(test2);

Clear input, textarea on blur and default if field is blank

I am trying to clear two input fields with classes assigned, and one textarea with a class assigned of their default values on blur and return it to default only if the field is blank when the field is exited. If the user has included their own text I require that to stay.
This is what I have thus far:
$("input, textarea").focus(function() {
this.value = "";
});
$(".namefield").on("blur", function() {
$(this).val("Name");
});
$(".emailfield").on("blur", function() {
$(this).val("Email");
});
$(".messagefield").on("blur", function() {
$(this).val("Message");
});

First a quick note, the HTML placeholder attribute will do exactly what you describe natively. I'd encourage that as a first choice if possible. The implementation would simply be:
<input type="text" class="namefield" placeholder="Name" />
More reading on it is here: http://www.w3schools.com/tags/att_input_placeholder.asp
If you can't add attributes to the elements, but you have the value set, you can add the attributes dynamically using jQuery. You could use the jQuery method we talked about originally, or you could just add the placeholder attribute.
Here are both examples, I've also updated the JS Fiddle with a working example.
Using Placeholder
$(document).ready(function() {
$("input, textarea").each(function() {
$(this).attr('placeholder',$(this).val());
$(this).val('');
})
})
Using data-default in conjunction with the original answer
$(document).ready(function() {
$("input, textarea").each(function() {
$(this).data('default',$(this).val());
})
})
Original Answer:
If you still need to use jQuery, you can set and check the state and compare it against a default value. Something like this would work:
HTML
<input type="text" class="namefield" data-default="Name" value="Name" />
<input type="text" class="emailfield" data-default="Email" value="Email" />
JavaScript
$(document).ready(function() {
$("input, textarea").focus(function() {
if($(this).data('default') == $(this).val()) {
$(this).val('');
}
});
$("input, textarea").blur(function() {
if($(this).val() == '') {
$(this).val($(this).data('default'));
}
});
})
You can see it working in this JS Fiddle: https://jsfiddle.net/77Lk4kep/1/
Hope that helps!

jquery set and remove checked attribute doesn't work, javascript does

for clarity, let's say that I have a checkbox that I want to check and uncheck using two buttons.
I can check/uncheck the box using basic javascript, but with jquery, as soon as I remove the attribute, I cannot set it back... Any idea why?
I created a basic fiffle to illustrate:
http://jsfiddle.net/2K244/
<button id='button1'>check</button>
<button id='button2'>uncheck</button>
<input type="checkbox" id="myBox1" value="polo" />
<br/>
<button id='button3'>check</button>
<button id='button4'>uncheck</button>
<input type="checkbox" id="myBox2" value="polo" />
<br/>
$(document).ready(function () {
$('#button1').click(function () {
$('#myBox1').attr('checked','checked');
});
$('#button2').click(function () {
$('#myBox1').removeAttr('checked');
});
$('#button3').click(function () {
document.getElementById('myBox2').checked = true;
});
$('#button4').click(function () {
document.getElementById('myBox2').checked = false;
});
});

You should be using .prop() instead. From jQuery's documentation on .attr():
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

You should use .prop() now.
http://jsfiddle.net/2K244/1/
$('#button1').click(function () {
$('#myBox1').prop('checked',true);
});
$('#button2').click(function () {
$('#myBox1').prop('checked', false);
});
$('#button3').click(function () {
$('#myBox2').prop('checked', true);
});
$('#button4').click(function () {
$('#myBox2').prop('checked', false);
});

to uncheck a box, use the prop function. $('#myBox1').prop('checked', false); without quotes on false

I don't understand why yours isn't working, but use this:
$("#myBox1").prop("checked",true);
$("#myBox1").prop("checked",false);
Make sure to have a recent version of jQuery.

The status of the checked state can be modified using the true || false second parameter in the .prop() method.
$('#btn_checked').on('click', function() {
$('#myBox1').prop('checked', true);
});
$('#btn_unchecked').on('click', function() {
$('#myBox1').prop('checked', false);
});
jsFiddle

jquery .find() not working

This code should clear the checkboxes when I click the button. It works if I remove the <form></form> tags, but I thought .find() was supposed to find all descendants?
<script type="text/javascript">
$(document).ready(function(){
var clearCheckboxes = function() {
$('.outerbox').find('input').each(function() {
$(this).attr('checked', false);
});
}
$('input.myButton').click(clearCheckboxes);
});
</script>
<div class="outerbox">
<form>
<input type="checkbox" checked="" /> checkbox1
<input type="checkbox" checked="" /> checkbox2
</form>
</div>
<input class="myButton" value="clear checkboxes now" type="button"/>

This code works fine for me: http://jsfiddle.net/CgsEu/
Anyway, if you are using the latest jQuery, try changing .attr to .prop. Also the .each isn't needed. .attr and .prop work on all elements in a jQuery object.
var clearCheckboxes = function() {
$('.outerbox').find('input').prop('checked', false)
}
DEMO: http://jsfiddle.net/CgsEu/1/
If there are other inputs, try limiting the .find to just checkboxes.
var clearCheckboxes = function() {
$('.outerbox').find('input:checkbox').prop('checked', false)
}
DEMO: http://jsfiddle.net/CgsEu/2/

$(document).ready(function(){
var clearCheckboxes = function() {
$('.outerbox').find('input[type="checkbox"]').each(function(){
$(this).prop('checked', false);
});
}
$('input.myButton').click(clearCheckboxes);
});​
DEMO.
Update:
$('.outerbox').find('input[type="checkbox"]').prop('checked', false);
or
$('.outerbox input:checkbox').prop('checked', false);
DEMO.

There's no need to use each(), you already have a collection of the elements and can apply the change to all of them, like so:
var clearCheckboxes = function() {
$('input', '.outerbox').attr('checked', false);
}
$('input.myButton').click(clearCheckboxes);
FIDDLE
There are a lot of suggestions to use prop() over attr(), and that is probably sound advice.
According to the W3C forms specification, the checked attribute is a
boolean attribute, which means the corresponding property is true if
the attribute is present at all—even if, for example, the attribute
has no value or an empty string value. The preferred
cross-browser-compatible way to determine if a checkbox is checked is
to check for a "truthy" value on the element's property using one of
the following:
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
To maintain backwards compatability, the .attr() method in
jQuery 1.6.1+ will retrieve and update the property for you so no code
for boolean attributes is required to be changed to .prop().
Nevertheless, the preferred way to retrieve a checked value is prop().

Use prop, e.g.
$(this).prop('checked', false);
instead if attr

var clearCheckboxes = function() {
$('input[type="checkbox"]', '.outerbox').prop('checked', false);
}
$('input.myButton').click(clearCheckboxes);

checkbox property using jquery

i m a beginner.
i want that when a checkbox is checked then it should allow user to write something in a txtbox. initially the txtbox is disabled. what i should write inside the function using jquery

<input type="checkbox" id="cb" />
<label for="cb">label for checkbox</label>
<input type="text" id="txt" disabled="disabled" />
<script type="text/javascript">
$(document).ready(function() {
var checkbox = $('#cb');
var textfield = $('#txt');
checkbox.click(function() {
if (checkbox.is(':checked')) {
textfield.removeAttr('disabled');
}
else {
textfield.attr('disabled', 'disabled');
}
});
});
</script>
working example with visibilty
working example with disabled-state
additionally:
as you are working with asp.net, your assignments should look like, eg:
var checkbox = $('#<%= this.cb.ClientID %>');
you should be aware of the way how the server-controls get rendered either (to choose an appropriate selector).
furthermore: you should also be aware of the fact, that disabled-inputs won't get posted, whereas readonly-inputs are no problem to handle...

$('#mycheckbox').click(function()
{
$("#mytextbox").attr('disabled','');
}
);

$(document).ready(function()
{
//To Disable the Check box on page Load
$('#TextBox').attr('disabled', 'disabled');
//On Click of the Check Box
$('#CheckBoz').click(function()
{
if($('#CheckBoz').is(':checked'))
{
$('#TextBox').removeAttr('disabled');
}
else
{
$('#TextBox').attr('disabled', 'disabled');
}
});
});
I Hope this code works perfectly for you and u jst need to paste it in your page and check the Component name according to it.