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.
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 realize similar question had earlier been answered on stack overflow a few times. I checked all the questions and none were similar to mine.
I have a html form that has some radio buttons. In my validation I want to check if atleast one of the radio buttons are checked.
My approach so far:
All radio buttons have same class
All radio buttons have same name
I need to
check if atleast one of the radio button is selecetd
read the value of selected button.
My Javascript so far
function supportFormValidation(){
var isChecked = $('.radioButton').attr('checked')?true:false;
alert(isChecked);
return false;}
This always returns false. But when I try to read vale by individual IDs of each radio button it returns true. Is there any way I can check if a radio button is checked by using the class name.
JSFiddle: http://jsfiddle.net/evj9nch3/
Just use :checked.
var isChecked = !!($('.radioButton:checked').length);
In order to access the checked property you need to use the prop function (after 1.6 anyways). Because the value is either true or false, it's considered a property of the element not an attribute.
Nits answer is a better way of doing it, but look below for the reason why your implementation isn't working.
Take a look at this post for more info
Here is a link to the fiddle
function supportFormValidation() {
var isChecked = $('.radioButton').prop('checked') ? true : false;
alert(isChecked);
return false;
};
supportFormValidation();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' class='radioButton' checked='true' />
You can use this. I checked this is working
$(".ClassName").prop("checked", true)
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;">
How can i disable the one radio input from the radio group ?
<input type="radio" name="radiogrp" value="op1" checked="checked">Option1
<input type="radio" name="radiogrp" value="op2"> Option2
<input type="radio" name="radiogrp" value="op3" > Option3
<input type="radio" name="radiogrp" value="op4"> Option4
My question is i want to disable option1 after clicking on any other button
For example:
when i select option2, than option1 should be disabled
Check this Fiddle I have just added
Let me know if this is not what you intended
As requested - posted fiddle answer
$('.rd').click(function(){
$('.rd[value="op1"]').attr('disabled', 'disabled');
});
Try
$('input[value="op2"]').click(function(e)
{
$('input[value="op1"]').attr('disabled', 'disabled');
});
http://jsfiddle.net/3CdZU/
$(":radio").change(function(){
$(":radio[name='radiogrp']").slice(0,1).attr("disabled","disabled");
});
DEMO
var radios = $('input[type="radio"][name="radiogrp"]');
radios.change(function() {
if (this.value != "op1") {
radios.filter('[value="op1"]').prop('disabled', true);
}
});
I cached the radio buttons, so I don't need to Query the DOM twice.
DEMO
Since, after the change, there is no way back, this is more fun way:
var radios = $('input[type="radio"][name="radiogrp"]');
var first = $('input[type="radio"][name="radiogrp"][value="op1"]');
radios.not(first).change(function() {
alert('changed'); // getting called only once.
first.prop('disabled', true);
radios.unbind('change');
});
LIVE DEMO
I am using jquery mobile with fancy dynamic styling, and I found that after performing the disable, I needed to explicitly issue an refresh using the checkboxradio("refresh") method call so that the styling would reflect the change. You can chain the method call, though, so it might look like this:
$('.rd').click(function(){
$('.rd[value="op1"]').attr('disabled', 'disabled').checkboxradio("refresh");
});
http://view.jquerymobile.com/1.3.2/dist/demos/faq/updating-the-value-of-enhanced-form-elements-does-not-work.html
While I appreciate gdoron's deeper, more technical, more efficient, more comprehensive approach, I believe that sometimes (just sometimes) the easier reading and shorter coding of Jibi Abraham's approach is warranted, especially in an otherwise lightweight situation.
I realize this isn't a distinct answer, but I don't have enough reputation to do a comment yet.
Its very easy, use jQuery's attribute selector. Here is an example of disabling the radio button with value op3
$('input[value="op3"]').attr('disabled', 'disabled');
Demo
Here is your solution
var radios = $('input[name=radiogrp]'); //Cache all the radio button
radios.click(function() {
//Attach a function to the click event of all radio button
if(this.value!='op1') { //Check if currently click button has value of op1
radios.filter('[value="op1"]').prop('disabled', true); //if not disable the first
}
});
Demo
I've been trying to figure out how to add the attribute "checked" to a checkbox on click. The reason I want to do this is so if I check off a checkbox; I can have my local storage save that as the html so when the page refreshes it notices the checkbox is checked. As of right now if I check it off, it fades the parent, but if I save and reload it stays faded but the checkbox is unchecked.
I've tried doing $(this).attr('checked'); but it does not seem to want to add checked.
EDIT:
After reading comments it seems i wasn't being clear.
My default input tag is:
<input type="checkbox" class="done">
I need it top be so when I click the checkbox, it adds "checked" to the end of that. Ex:
<input type="checkbox" class="done" checked>
I need it to do this so when I save the html to local storage, when it loads, it renders the checkbox as checked.
$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{
$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});
$( this ).attr( 'checked', 'checked' )
just attr( 'checked' ) will return the value of $( this )'s checked attribute. To set it, you need that second argument. Based on <input type="checkbox" checked="checked" />
Edit:
Based on comments, a more appropriate manipulation would be:
$( this ).attr( 'checked', true )
And a straight javascript method, more appropriate and efficient:
this.checked = true;
Thanks #Andy E for that.
It seems this is one of the rare occasions on which use of an attribute is actually appropriate. jQuery's attr() method will not help you because in most cases (including this) it actually sets a property, not an attribute, making the choice of its name look somewhat foolish. [UPDATE: Since jQuery 1.6.1, the situation has changed slightly]
IE has some problems with the DOM setAttribute method but in this case it should be fine:
this.setAttribute("checked", "checked");
In IE, this will always actually make the checkbox checked. In other browsers, if the user has already checked and unchecked the checkbox, setting the attribute will have no visible effect. Therefore, if you want to guarantee the checkbox is checked as well as having the checked attribute, you need to set the checked property as well:
this.setAttribute("checked", "checked");
this.checked = true;
To uncheck the checkbox and remove the attribute, do the following:
this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;
If .attr() isn't working for you (especially when checking and unchecking boxes in succession), use .prop() instead of .attr().
A simple answer is to add checked attributes within a checkbox:
$('input[id='+$(this).attr("id")+']').attr("checked", "checked");
use this code
var sid = $(this);
sid.attr('checked','checked');