Currently, I have multiple checkbox inputs with different names(checkit, checktype, checklog) assigned to the inputs.
What I want to do is to have each checkbox to change the color of the background when checked.
However, I dont know how I can assign each one of the checkbox to do some tasks without duplicating the following code ?If possible some examples or tips will be great! I would love to hear from you .
Should I remove name="checkit" if I want to make all the inputs do the same thing? What if I want them to do some slightly different things?
$('input[name="checkit"]').change(function () {
if ($(this).prop('checked')) {
$(this).parent().parent().addClass('alterBackground');
} else {
$(this).parent().parent().removeClass('alterBackground');
}
});
Add the following by , or give some class name to it
$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
if ($(this).prop('checked')) {
$(this).parent().parent().addClass('alterBackground');
} else {
$(this).parent().parent().removeClass('alterBackground');
}
});
Don't use the name atrribute in jQuery and add a common class to each checkbox for a common functionality and access it with class selector in jQuery as shown below.
If you want to do something different with different checkboxes apart from this, then you can add more jQuery code for that specific input tag. It will not affect this code.
$('input.someClass').change(function () {
if ($(this).prop('checked')) {
$(this).parent().parent().addClass('alterBackground');
} else {
$(this).parent().parent().removeClass('alterBackground');
}
});
You can remove the name part from the selector and add selector for input[type='radio']. And if you want to add a bit different logic (I think you mean different classes), you can get the name of the current checked checkbox and use it to make your logic. Something like this
$('input[type="radio"]').change(function () {
var checkboxName = $(this).prop('name');
// if(checkboxName === .....)
});
Updated according to the comment
$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
var checkboxName = $(this).prop('name');
// .............
});
$('input[type="checkbox"]').change(function () {
if ($(this).prop('checked')) {
$(this).parent().parent().addClass('alterBackground');
} else {
$(this).parent().parent().removeClass('alterBackground');
}
});
Use
$('input[type="checkbox"]')
instead of
$('input[name="checkit"]')
Related
I'm having a problem with the syntax (or maybe with the selectors) on my code. See the demo.
I tried the following code but the results does nothing.
#1. hasAttribute():
if ($('input[type=checkbox]').hasAttribute("disabled")) {
$(this).closest('.chkbox').addClass("is-disabled");
}
#2. is():
if ($('input[type=checkbox]').is("[disabled]")) {
$(this).closest('.chkbox').addClass("is-disabled");
}
// ------------------------------------------------
if ($('input[type=checkbox]').is(":disabled")) {
$(this).closest('.chkbox').addClass("is-disabled");
}
#3. prop():
if ($('input[type=checkbox]').prop("disabled", true)) {
$(this).closest('.chkbox').addClass("is-disabled");
}
So then I think the problem is on the line:
$(this).closest('.chkbox').addClass("is-disabled");
Any idea?
Thanks.
You can use :disabled selector
see here
You're using $(this) without declaring anything. Thats the reason it's not working. It works in the second example because of the .change() function gives the context of the 'thing' (this) that is changing.
This code should work as you desire.
$(function() {
// Grab all inputs with the type checkbox.
var input = $('input[type=checkbox]')
// Check for each of the input fields (i, el stands for index, element)
input.each(function(i, el) {
// Does it have the attribute disabled?
if(el.hasAttribute('disabled')) {
// Add the class 'is-disabled'
$(el).closest('.chkbox').addClass('is-disabled')
}
})
$('input[type=checkbox]').change(function(){
if ($(this).is(":checked")) {
$(this).closest('.chkbox').addClass("is-checked");
} else {
$(this).closest('.chkbox').removeClass("is-checked");
}
});
});
I am currently working on a bit of javascript that will execute when a checkbox is checked.
When the checkbox is checked, the form will display 2 more select boxes.
I've attempted something but i'm not very good with javascript, can someone take a look and lemme know where i'm going wrong?
$(document).ready(function() {
$("#repeat").change(function () {
if ($("#repeat").checked){
$("#numbers").slideDown();
} else{
$("#numbers").slideUp();
}
});
$("#numbers").hide();
$("#repeat").tigger("change");
});
And the id of the checkbox is repeat and id of one of the select boxes is numbers.
This part is not correct:
$("#repeat").checked
and should be
this.checked
So whole script:
$(document).ready(function () {
$("#repeat").change(function () {
if (this.checked) {
$("#numbers").slideDown();
} else {
$("#numbers").slideUp();
}
});
$("#numbers").hide();
$("#repeat").trigger("change"); // <--- trigger, not tigger
});
$("#repeat") is a jQuery instance object, it doesn't have a property checked. However this inside of change event handler refers to the HTMLSelectElement which has this property.
Also it's trigger not tigger.
I am new here, sorry if I do some mistake with this question.
I have a HTML code.
hit me
with this function i can add class two in class one
$(document).ready(function () {
$('a#foo').click(function(){
$('.one').toggleClass('two');
});
});
but how if I want to add class two if class two is not exist and do other function if class two is exist?
maybe like this,
hit me
i klik hit me and jquery is add class two,
hit me
but when I klick hit me again, class two is not removed and because class is exist, i create other function based on class two is exist.
lets say like this,
i klik hit me
hit me
<div id="blah" class=""*>lorem</div>
then
hit me
<div id="blah" class=""*>lorem</div>
and klik hit me again.
hit me
<div id="foo" class="blah2">lorem</div>
can you give me code or google suggest keyword or link, because I confused what i must search first.
thanks for adv,
sorry for my Grammer, i cant speak/write English well, if any wrong grammer or language please correct me.
Using the hasClass() method and you're examples:
$(document).ready(function () {
$('a#foo').click(function(){
if ($(this).hasClass('two')) {
$('#blah').addClass('blah2');
} else {
$(this).addClass('two');
}
});
});
Use jQuery hasClass method .
$(document).ready(function () {
$('a#foo').click(function(){
if ($(this).hasClass('two')) {
doSomething();
} else {
$('.one').addClass('two');
}
});
});
i'm a little confused as to what exactly you want to do, but I think you need to look into .hasClass() for starters.
$(document).ready(function () {
$('a#foo').click(function(){
if ($('.one').hasClass('two')) {
// do stuff you want to do if element already has class "two"
}
else {
// do stuff if it doesnt already have class "two"
}
});
});
I am guessing at your exact needs, but I hope that my assumptions weren't too far off base.
Given HTML like this:
hit me
<div id="change" class="blah1"></div>
And JS Like this:
$(document).ready(function () {
$('a#foo').click(function(e){
e.preventDefault();
var changeDiv = $('#change');
if ($(this).hasClass('two')) {
changeDiv.addClass('blah2').removeClass('blah1');
changeDiv.html('<p>Blah 2</p>');
} else {
changeDiv.addClass('blah1').removeClass('blah2');
changeDiv.html('<p>Blah 1</p>');
}
$('.one').toggleClass('two');
});
});
You will be able to toggle your link's class and change or update another div based on the class of your link when clicked.
You can see this code working at http://jsfiddle.net/PTdLQ/4/
Another way to look at this is to check if the given class exists in the dom. Therefore, one can use the following:
$(document).ready(function () {
$('a#foo').click(function(){
if ($('.two').length) {
//there is a class two
SomeFunction();
} else {
//there is no class two
SomeOtherFunction();
}
});
});
Hope I typed it right
Use this code:
<script>
$(document).ready(function () {
if(!$('#mydiv').hasClass('myclass')) {
$('#mydiv').addClass('myclass');
}
});
</script>
I am trying to apply a function to every checkbox on a page that shows/hides <div class="selectlist"> depending on if the checkbox is checked, this function makes all the <div class="selectlist"> on the page toggle
$("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
I tried the jquery each function like this but that doesnt seem to work
$.each($("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
}));
I know its possible to this by using a class instead of input[type=checkbox] but I want to avoid doing that
How can I make jquery change the behavior of the checkbox the user clicks?
If you're trying to bind an event handler to all elements verifying input[type=checkbox], simply do
$(document).on('change', "input[type=checkbox]", function() {
if (!this.checked) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
No need to use each there : most jQuery functions work if the jQuery set contains more than one element.
Note that I use on there instead of live : after having been deprecated for a long time, live has been removed from recent versions of jQuery.
EDIT : discussion in comments below lead to this code :
$(document).on('change', "input[type=checkbox]", function() {
$(this).next().toggle(this.checked);
});
$(document).on('change', 'input[type=checkbox]', function() {
$('#selectlist').toggle(this.checked);
});
ID's are uniqe, and there is no "all the <div id="selectlist"> on the page toggle", there can be only one? Use a class instead, and show us what the markup looks like !
Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?
First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});
This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});
$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this
Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})
Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});