Very simple , this st**id tinny things will kill me.
I trying loop each radio button.
$('#recover input:radio:checked').each(function() {
alert("checked");
});
OR
function Checkform() {
var result = true;
$('#recover input[type=radio]').each(function() {
var checked = $(this).find('input:radio:checked');
if (checked.length == 0) {
result = false;
alert ("check");
}
});
return result;
}
OR
$('#recover input[type=radio]').each(function(){
if($(this).attr('checked')){
alert ("check");
}
});
HTML :
<div id="recover">
<input type="radio" name="s">
<input type="radio" name="s">
<input type="radio" name="s">
</div>
tryed also :
<div id="recover">
<form>
<input type="radio" name="s">
<input type="radio" name="s">
<input type="radio" name="s">
</form>
</div>
And:
<div id="recover">
<form>
<input type="radio" name="s" value="1">
<input type="radio" name="s" value="2">
<input type="radio" name="s" value="2">
</form>
</div>
And more combination of HTML .
And tryed more like 5 other examples of jQuery / Javascript, none working and i dont know why .
Any help please , thanks allot.
Use $(this).prop('checked') instead of $(this).attr('checked')
jsFiddle Demo
Attributes vs. Properties
...
Nevertheless, the most important concept to remember about the checked
attribute is that it does not correspond to the checked property. The
attribute actually corresponds to the defaultChecked property and
should be used only to set the initial value of the checkbox. The
checked attribute value does not change with the state of the
checkbox, while the checked property does. Therefore, the
cross-browser-compatible way to determine if a checkbox is checked is
to use the property:
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
The same is true for other dynamic attributes, such as selected and
value.
TRy this Demo
http://jsfiddle.net/devmgs/X6QhN/
function doCheck(){
$('#recover input[type="radio"]:checked').each(function() {
alert("checked");
});
}
use prop
because it gives true or false
and attr
gives property name like checked or not so cant use in condition
$('#recovery input[type=radio]').each(function(){
if($(this).prop('checked')){
alert ("check");
}
});
reference prop
$(document).ready(function(){
$('#recover > radio').each(function(){
if($(this).prop('checked')){
alert ("checked");
}
});
});
Try This
`
jQuery(function ()
{
if (jQuery('#recover input[name="s"]').is(':checked'))
{
alert("Checked"); }
else
{
alert("Please select an Record");
}
});`
You can access the checked property directly from the dom reference
$('#recover input[type=radio]').each(function () {
if (this.checked) { // or $(this).is(':checked')
alert("check");
}
});
If you want to process only checked items then use the :checked selector
$('#recover input[type=radio]:checked').each(function () {
alert("check");
});
Demo: Fiddle
Related
I'm trying to create a menu where each element has its own checkbox. On selecting the sorting button ( for now it is a checkbox here ), the menu is supposed to show only the elements who already have the checkboxes active ( this is done by manually clicking the checkbox of the element and keeping it active)
Here's my HTML code
<input type= "checkbox" class="toggler" id="clicked" onclick="tclick()" >click here to sort
<p><input type="checkbox" id="inactive" onClick="but_clicked()">Hello1</p>
<p><input type="checkbox" id="inactive" onClick="but_clicked()">Hello2</p>
<p><input type="checkbox" id="inactive" onClick="but_clicked()">Hello3</p>
And here is my Jquery
function but_clicked(){
// alert("Hello, checkbox clicked");
if(this.id=="active"){
this.id="inactive";
console.log(this.id);}
else{
this.id="active";
console.log(this.id);
}
}
function tclick(){
//alert("Toggler clicked");
if(this.id=="clicked"){
this.id="empty";
console.log(this.id);
}
else{
this.id="clicked";
console.log(this.id);
}
}
$(document).ready(function(){
$('.toggler').change(function(){
if($(this).is('clicked')){
$('#inactive').hide();
$('#active').show();
}
else{
$('#active').show();
$('#inactive').show();
}
})
});
But when I am setting the Click here to sort checkbox, the others are not being hidden regardless of each of their checkbox status. I feel like it's a very silly mistake that I am doing, please help.
First of all id property must be unique in the DOM, so you cannot have multiple elements with id active or inactive.
This is the main problem as $('#inactive') will only return the first element it matches (since it should be unique).
Furthermore, checkboxes have a checked property that signifies if they are checked or not so all your code could just check that instead of altering the id all the time.
Last, you should use label tags for the text instead of p so that clicking on the text will also check/uncheck the checkbox.
(oh, the .toggler checkbox actually filters, and not sorts ,the others)
So taking all issues into account you could simplify your code to
$(document).ready(function() {
$('.toggler').change(function() {
if (this.checked) {
$('.grouped').parent().hide();
$('.grouped:checked').parent().show();
} else {
$('.grouped').parent().show();
}
})
});
label{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><label><input type="checkbox" class="toggler">click here to filter</label></p>
<label><input type="checkbox" class="grouped">Hello1</label>
<label><input type="checkbox" class="grouped">Hello2</label>
<label><input type="checkbox" class="grouped">Hello3</label>
Your code can be way easier with some little tricks.
First thing, do not change IDs at run time, it's a bad practise.
Checkboxes have properties like checked, which evaluates to false or true when tested with this.checked.
<input type= "checkbox" class="toggler" id="click_to_toggle" >click here to toggle
<p class="item"><input type="checkbox" >Hello1</p>
<p class="item"><input type="checkbox" >Hello2</p>
<p class="item"><input type="checkbox">Hello3</p>
And this is the only JS you need:
$('#click_to_toggle').on('change', function(){
if( this.checked ){
$('.item').hide();
$('.item input:checked').each(function(){
$(this).closest('.item').show();
});
} else {
$('.item').show();
}
});
Working fiddle HERE
Pass in the element itself this this in the html, and just use that parameter in your javascript instead of this. Also you need to use .is with the :checked selector instead of just clicked. I also change changed .changed() to .clicked() since they are the same event in this case. You also might want to consider changing the id of inactive/active to be a class since all ids must be unique.
function but_clicked(e) {
if (e.id == "active") {
e.id = "inactive";
console.log(e.id);
} else {
e.id = "active";
console.log(e.id);
}
}
function tclick(e) {
if (e.id == "clicked") {
e.id = "empty";
console.log(e.id);
} else {
e.id = "clicked";
console.log(e.id);
}
}
$(document).ready(function() {
$('.toggler').click(function() {
if($('.toggler').is(':checked')) {
$('#inactive').hide();
$('#active').show();
} else {
$('#active').show();
$('#inactive').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="toggler" id="clicked" onclick="tclick(this)">click here to sort
<p><input type="checkbox" id="inactive" onClick="but_clicked(this)">Hello1</p>
<p><input type="checkbox" id="inactive" onClick="but_clicked(this)">Hello2</p>
<p><input type="checkbox" id="inactive" onClick="but_clicked(this)">Hello3</p>
I am trying to create a checkbox with label. When user click the label, it will check if checkbox checked. The first time, I click the label, the box is checked, but no alert action. After I click the second time, it start to function, alert action happen. What did I do wrong. I have tried to use individual ID. Click not working either.
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name).click(function(){
if ($('#'+id_name +'_checkbox').prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
<script type="text/javascript">
$('label').click(function() {
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Also be sure, you have included jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
And in new version of jQuery you can use insted of this:
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
This piece of code:
// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
alert('Unchecked');
}
else {
alert('Checked');
}
Workind DEMO here in jsFiddle
Simplify things, you don't need each loop:
$('label').click(function() {
name=this.id;
if ($('#'+name+'_checkbox').prop('checked')) {
alert('Checked');
}
else{
alert('unchecked');
}
});
Demo: http://jsfiddle.net/fqvajvo1/2/
Script running correctly, script checks prop, but on label click -> checkbox is really unchecked, property changing comes later.
So, maybe in your case reverse logic could help (if you need alerts at all):
http://jsfiddle.net/fqvajvo1/4/ :)
I always use .is(':checked').I find it way more reliable
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+id_name +'_checkbox').change(function(){
if ($(this).is(':checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
your click id is not complete name,so add complete name and call $(this) property will be ok...
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name+'_checkbox').click(function(){
if ($(this).prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Use .on to work for all events and all clicks on jQuery
Mainly used for dynamic creating elements
$(document).on('click','selector',function(){
});
Use class names for best options for grouped elements
I have multiple check boxes and wanting to get an overall value for them all.
For example if one is checked then value is true/selected.
If none are checked then false/unchecked.
My HTML is:
<input id="one" type="checkbox">
<input id="two" type="checkbox">
<input id="three" type="checkbox">
<input id="four" type="checkbox">
<button onclick="check();">Is checked (jQuery Chained)</button>
<button onclick="check2();">Is checked(Big If Statement)</button>
My JavaScript/jQuery is:
function check() {
var booleee = $('#one,#two,#three,#four').attr('checked');
alert("Checked: " + booleee);
}
function check2() {
if ($('#one').attr('checked') || $('#two').attr('checked') || $('#three').attr('checked') || $('#four').attr('checked')) {
alert("Checked: true");
}
alert("Checked: false");
}
Js Fiddle: Click Here
Please note, I have solved this problem. This question is more to help me understand why my checked2() function works and my check() doesnt.
var booleee = $('#one,#two,#three,#four').attr('checked'); checks only whether the first (in this case #one) checkbox is checked.
From the doc for attr
Get the value of an attribute for the first element in the set of
matched elements.
it should be
var booleee = $('#one,#two,#three,#four').filter(':checked').length > 0;
Also in new versions(>1.6) you need to use the property 'checked' (.prop('checked')) instead of attr in the alternative you have a :checked filter so .is(':checked').
Because it's not checking all the elements in the selector.
to make it work
function check() {
var booleee =$("input:checkbox:checked").length > 0;
alert("Checked: " + booleee);
}
To more specific selection add form id in selector
DEMO
A better approach: http://jsfiddle.net/arvind07/ZP78F/
function check() {
var checks = $('input:checkbox');
var checked = 0;
checks.each(function() {
if ($(this).is(":checked")) {
checked = 1;
return false;
}
});
if (checked) {
alert("Checked");
} else {
alert("Not checked");
}
}
in html set checked property
<input id="one" type="checkbox" checked="checked">
<input id="two" type="checkbox" checked="checked">
<input id="three" type="checkbox" checked="checked">
<input id="four" type="checkbox" checked="checked">
you not defined checked so it show undefined because it cant read this attribute and when you call second function then only false come in alert because their checkbox checked attribute not find
see demo
var checked = $(':checkbox:checked').length > 0;
I have two checkboxes and one of the checkboxes must be checked. I can see that it's right, no syntax errors. What should be made to my code to check if none of the checkboxes were checked?
HTML :
<input type="checkbox" value="aa" class="first" name="a"> Yes<br/>
<input type="checkbox" value="bb" class="second" name="b"> No <br/>
<button type="submit">Go!</button>
<p class="error"></p>
JavaScript:
$('button').on('click',function(){
if( $(".first:not(:checked)") && $(".second:not(:checked)") ){
$('.error').text('You must select atleast one!');
}else
$('.error').hide();
});
Example : http://jsfiddle.net/ptbTq/
Check this fiddle: http://jsfiddle.net/692Dx/
Checking code:
if($('input[type="checkbox"]:checked').length == 0) {
alert('none checked');
}
You are using selectors which do not return boolean values which is what you need when writing an if condition. Here's what you could do:
$('button').on('click',function() {
if(!$(".first").is(":checked") && !$(".second").is(":checked")) {
$('.error').text('You must select atleast one!').show();
} else {
$('.error').hide();
}
});
or if you prefer and think it could be more readable you could invert the condiciton:
$('button').on('click',function() {
if($(".first").is(":checked") || $(".second").is(":checked")) {
$('.error').hide();
} else {
$('.error').text('You must select atleast one!').show();
}
});
Also notice that you need to .show() the error message in the first case as you are hiding it in the second.
And here's a live demo.
Short:
$("input[type=checkbox]").is(":checked")
returns true if:
one of your checkboxes - from the selector ("input[type=checkbox]") - is checked.
else return false
and in your case:
$(".first, .second").is(":checked")
Do something at least one of your checkboxes is checked
Put the same class on both checkboxes and you can do something like
if ($(':checkbox.the_class:checked').length > 0) {
// at least one checkbox is checked
// ...
}
The best would be to put your checkboxes inside a div with an unique ID so you can verify all the checkboxes in there, so your code will work in all cases. Even when adding new checkboxes to the div later on.
<div id="cb">
<input type="checkbox" value="aa" class="first" name="a" /> Yes<br/>
<input type="checkbox" value="bb" class="second" name="b" /> No <br/>
<button type="submit">Go!</button>
<p class="error"></p>
</div>
Your JQuery:
$('button').click(function() {
var checked_one = $('div#cb input[type="checkbox"]').is(':checked');
if (!checked_one )
$('.error').text('You must select atleast one!');
else
$('.error').hide();
});
Live demo can be seen here: http://jsfiddle.net/ptbTq/15/
Let say I have this:
<input id="album" name="album" type="checkbox" value="1" />
<label for="album">Albums</label><br>
<ul>
<li>
<input id="albums_155596787784467" name="albums[155596787784467]" type="checkbox" value="1" />
<label for="albums_155596787784467">Profile Pictures</label><br>
</li>
<li>
<input id="albums_100358313308315" name="albums[100358313308315]" type="checkbox" value="1" />
<label for="albums_100358313308315">Perfil</label><br>
</li>
</ul>
When the user check the first checkbox I want that all checkboxes in the ul to be checked too.
Also, if any of the checkboxes inside the ul is set to not checked, then the first checkbox should be set to not checked too.
I use JQuery.
Edit:
Also, if all checkboxes inside the ulare checked, then the first checkbox should be checked too.
$("input[name='album']").change(function()
{
if( $(this).is(':checked') )
{
$("input[type='checkbox']","ul").attr('checked',true);
} else
{
$("input[type='checkbox']","ul").attr('checked',false);
}
});
Edited !
And for part 2 of your example :
$("input[type='checkbox']","ul").each(function()
{
$(this).change(function()
{
if( ! $(this).is(':checked') )
{
$("input[name='album']").attr('checked',false);
}
$("input[name='album']").attr('checked',( $("input[type='checkbox']","ul").length == $("input[type='checkbox']:checked","ul").length ));
});
});
Better to give the ul an id and try the below code.
$(function(){
$("#album").change(function(){
$("#ulid input:checkbox").attr("checked", this.checked);
});
var childCheckBoxes = $("#ulid input:checkbox");
var totalcheckBoxesCount = childCheckBoxes.length;
childCheckBoxes.change(function(){
var checkedBoxesCount = childCheckBoxes.filter(":checked").length;
$("#album").attr("checked", totalcheckBoxesCount === checkedBoxesCount);
});
});
Working demo
try this
$(document).ready(function(){
$("#album").click(function(){
if($('#album').is(':checked'))
$("input[type=checkbox]").attr('checked','checked');
else
$("input[type=checkbox]").removeAttr('checked')
});
});