Question regarding checking the state of a checkbox class - javascript

I'll try and make this question simple. Can I assign a class to a series of different checkboxes, and use Jquery to do something when any one of those checkboxes is checked? Searching around on the internet I have found documentation on grabbing the name: $('input[name=foo]').is(':checked') but when I swap out the name attribute for the class attr, it won't work! How can I set an event to occur if any of the checkboxes with this certain class is checked? Please help me out! Thanks

Use hasClass to test whether or not a particular element has been assigned a certain class e.g.:
$(document).ready(function() {
$("input[name=something]:checkbox").click(function() {
if($(this).is(":checked") && $(this).hasClass("foo")) {
// the checkbox has been checked and has a class of foo
}
});
});
Try a demo here.

You can get the status of all the checkbox at a single go by putting same name to all the checkboxes.

Related

Check for one more condition with this code javascript

This is my code
//Remove disabled class from the next step button
var element = document.getElementById('stepbirth');
element.classList.toggle("disabled", parseJson.some(function (resp) {
return !resp.code;
}));
Which is working fine, it check the response from the php script on each element and toggle the disabled class from the button.
My question is this, How can i check one or more condition with this code..
Like i also have input type radio in the same form, how can i combine this together to check while input radio is checked on each class and response code is 1 then remove disabled class else do not remove disabled class.
I hope you understand guys my question.
Thanks in advance.
One way to do this would be to return true or false by checking if all the conditions are met. Something like this:
//Remove disabled class from the next step button
var element = document.getElementById('stepbirth');
element.classList.toggle("disabled", parseJson.some(function (resp) {
return (resp.firstcondition && resp.secondcondition && resp.thirdcondition);
}));

Multiple atributes in JQuery each function

I have a function in JQuery and this function adding values if checkbox is checked but I would like to ignore if checkbox is disabled. Is it possible to add this in one statement?
$('.group:checked').each(function(i, e) {
...
Can i add .is(':enabled') somewhere in line above?
Just add the :enabled selector:
$('.group:checked:enabled').each

check box validation javascript

I need to validate the selection of at least one check box on a table. I am not using an alert because I already have a class on CSS that highlights in red the inputs, selects and other elements if they are not filled out.
This is my JS:
var btnRegister= document.querySelector('#btnRegisterRegObr');
btnRegister.addEventListener('click', function () {
var bError= false;
//I am initializing this boolean variable so that it also shows an error
//message on the screen if the user has not selected any option at all...
var elementCheckRegObr = document.querySelector('#checkRegObr');
if (elementCheckRegObr.checked==false){
bError=true;
elementCheckRegObr.classList.add('error');
//This part of the code brings the error I have
//previously created on CSs if the checkbox is not checked
}
else{
elementCheckRegObr.classList.remove('error');
}
});
The button on HTML has the right id on the HTML: id="btnRegisterRegObr.
I was looking at some codes here and people were validating using the .checked==false
However this does not seem to work for mine.
As a matter of fact, I first thought I needed to use the syntax of if (elementCheckRegObr.checked=="") but that one does not seem to work either.
I dont have problems validating inputs, selects nor radio buttons, but I am not sure if I am doing it on the right way with the check boxes. Any help or advice would be greatly apprecciate it :)
I suggest that you use getElementById to get your elements, and test if the checkbox is checked this way:
if(document.getElementById('idOfTheCheckBox').checked){
alert('hey, im checked!');
}

Why my code to set the checked state of a checkbox with query doesn't work?

Why this works
document.getElementById("myCheckbox").checked = false;
whereas this doesn't with jquery:
$("myCheckbox").attr("checked") = false;
There are a couple of things wrong with your code. First of all, you select elements in jQuery using selectors, just like in CSS. So you need to turn this
$("myCheckbox")
into this, using the hash (#) for ID selector
$("#myCheckbox")
Secondly, jQuery doesn't really use properties, but methods for everything. Pass one parameter to get a value, two to set it. In this case, you also want to be using prop and not attr. So you would need to do:
$("#myCheckbox").prop("checked", false);
Live example
You're missing a # to indicate that myCheckbox is an id, also you cannot set an attribute value directly like that, pass the value as second parameter:
$("#myCheckbox").attr("checked", false);
Also see the docs: ID Selector (“#id”)
$("#myCheckbox").attr('checked','checked');
and
$("#myCheckbox").removeAttr('checked');
you want to do this :
$("#myCheckbox").attr("checked", "checked");
dont miss the # aswell.
To check the checkbox using jquery
$("#myCheckbox").attr( "checked" , true );
Or uncheck it
$("#myCheckbox").attr( "checked" , false );
It'll work if your checkbox has id set to myCheckbox i.e. id="myCheckbox" but if your checkbox has class set to myCheckbox i.e. class="myCheckbox" then change your selector to
$('.myCheckbox') // here . used to specify class name.
To check all checkboxes use
$("input:checkbox").attr( "checked" , true ); // or set false to uncheck
or if you want to check or uncheck using name attribute then
$("input:checkbox[name='mychk']").attr( "checked" , true );​ // if 'mychk' is name of the checkbox it'll be checked

Jquery checkboxes within containing table selector question

My current code:
<script type="text/javascript">
function checkAll(checked) {
$("input[type='checkbox']:not([disabled='disabled'])").attr('checked', checked);
}
</script>
<input type="checkbox" id="cbxSelectAll" onclick="checkAll(this.checked);" />
The short version:
How do I modify the function call and method above to check all checkboxes inside a table containing the checxbox form element.
The long version:
I am creating a WebUserControl containing a grid view in asp.net that is going to have a delete option. I would like the delete to be a series of checkboxes with one a box in the header to select all of them. What this amounts to for non ASP.NET people is a table with a header row that has a checkbox and every row also has a checxbox.
I have used the above code to check all boxes on the entire page. That won't work here though because I want to have multiple of these on the page at once each working independently. I know I could use a selector to select all the boxes if I ID'd the table but that would require some coding to name the table uniquely and then put that name in the script block.
Really what I would like is to modify the script above to check all checkboxes in the containing table of the "select all" box. The table containing the checkbox could be nested within others but I don't see any being nested within it, or if there are and the nested table also contains checxboxes I don't care if they also get selected.
Thanks for your help.
First, don't mix your HTML and your Javascript. Use event handler binding instead.
Second, use closest to get the nearest ancestor element of a particular type:
$(document).ready(function(){
$('#cbxSelectAll').click(function() {
$(this)
.closest('table') // get the parent table element
.find("input:checkbox:enabled") // find children that match the selector
.attr('checked', this.checked); // set their checked value
});
});
Change your inline attribute to this:
<input type="checkbox" id="cbxSelectAll" onclick="checkAll.call(this);" />
And your checkAll() to this:
function checkAll() {
$(this).closest('table').find("input:checkbox:enabled").attr('checked', this.checked);
}
Using .call(), it is called from the context of the element clicked.
Then the jQuery gets the closest()(docs) <table> and finds the inputs using the checkbox-selector(docs) and the enabled-selector(docs) .
Then when using the attr()(docs) method, you can use this.checked to set the checkboxes to the current state of the one checked.
You can find the table containing the select all using .closest
function checkAll(checked) {
var $table = $(this).closest('table');
$table.find("input[type='checkbox']:not([disabled='disabled'])")
.attr('checked', checked);
}
If there might be several nested tables it's often easiest to specify the one you want with a class, e.g. $(this).closest('table.tableOfCheckboxes'); where you add class tableOfCheckboxes to the table you want to find.

Categories

Resources