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'));
});
Related
I have the following question, when I change the value of the combobox, the checkboxes are still marked, with prop the values are unmarked, but this time it does not work, the idea is to reset the marked checkboxes when the value of the checkbox is changed.
Regards.
var cambio = $("#cmbKit").on('change', function () {
var checkPoint = !$(this).data('checked');
$('#tblCajas input[type="checkbox"]').each(function () {
if (checkPoint == true) {
$(':checkbox').prop('checked', false);
$("input[type='checkbox']").prop('checked', false);
}
});
});
if (cambio) {
selectedBox = 0;
$('#divCalculos').hide();
$('#btnPlanificar').hide();
}
As you want to reset every checkbox on change event of combobox, you can use below code -
$("#cmbKit").change(function() {
$("input[type='checkbox']").prop('checked', false);
});
You shouldn't use any if condition as you are going to reset it after every change event.
Please note that given code will reset all checkboxes on page, add table selector as well in case you have multiple table with different content.
Hope this helps.
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"]')
I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/
I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.
Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/
You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.
I have two checkboxes with labels named Headline A and Headline B. I'm trying to come up with a way to activate the checkbox of Headline B if the checkbox of Headline A is checked - and vice versa.
<input type="checkbox">
<label>HEADLINE A</label>
<input type="checkbox">
<label>HEADLINE B</label>
This is what I started on, but I'm afraid it's not even close.
if($("label:contains('HEADLINE A')").closest('input').is(':checked')){
$("label:contains('HEADLINE B')").closest('input').is(':checked')
}
Do I use regex to match the word 'headline' and then come up with the appropriate action?
closest selects the closest parent of an element not the closest sibling, if you want to modify the checked property of an input you should use prop method instead of is.
if ( $("label:contains('HEADLINE A')").prev('input').is(':checked') ) {
$("label:contains('HEADLINE B')").prev('input').prop('checked', true)
}
Or:
var state = $("label:contains('HEADLINE A')").prev('input').is(':checked');
$("label:contains('HEADLINE B')").prev('input').prop('checked', state);
In case that you want to modify the checked property based on change event you can try:
$('input[type=checkbox]').filter(function() {
return $(this).next().text() === 'HEADLINE A'
}).change(function() {
$("label:contains('HEADLINE B')").prev('input').prop('checked', this.checked)
})
http://jsfiddle.net/FvLyJ/
I believe that the application must set the input of html with marked or not, right? Following this premise, I believe the solution is this:
var headlineA = $("label:contains('HEADLINE A')").prev('input');
var headlineB = $("label:contains('HEADLINE B')").prev('input');
headlineA.attr('disabled', true);
headlineB.attr('disabled', true);
if(headlineA.is(':checked')){
headlineB.attr('disabled', false);
}
if(headlineB.is(':checked')){
headlineA.attr('disabled', false);
}
You see here. Just set one of the inputs as html checked.
If these are the only two Checkboxes then you can use something like this
$('input[type="checkbox"]').on('click', function() {
var $this = $(this);
if( $this.is(':checked')){
$('input[type="checkbox"]').not($this).prop('checked' , true);
}
});
Fiddle
If check/uncheck
$('input[type="checkbox"]').on('click', function() {
var $this = $(this);
$('input[type="checkbox"]').not($this).prop('checked' , this.checked);
});
I'm writing some code that will allow the following:
1.) If a user checks a checkbox it will change the parent <tr> to have a class of selected (this can also be unchecked and remove the class)
2.) Any checkboxes that are already checked will have the class added on document load
3.) If a user checks the #checkall input then all inputs will become checked and add the class of selected (if checked again then it will unselect all and remove the class)
This is the code I have so far:
$("table input[name=choose]:checked").each(function()
{
$(this).closest("tr").addClass("selected");
});
$("table input[name=choose]").live("change", function()
{
$(this).closest("tr").toggleClass("selected");
});
if ($('#checkall:checked') == true)
{
$('#checkall').live("click", function()
{
$('table input[name=choose]').attr('checked', false);
$('table input[name=choose]').closest("tr").toggleClass("selected");
});
}
else
{
$('#checkall').live("click", function()
{
$('table input[name=choose]').attr('checked', true);
$('table input[name=choose]').closest("tr").toggleClass("selected");
});
}
The first two work fine but number 3 doesn't uncheck the checkboxes... Any ideas why? But the class part works fine??
Thanks
I guess it runs always into the else block (have you debugged this)?
Try writing this for checking if the checkbox is checked:
if ($('#checkall').attr('checked'))
Because if ($('#checkall:checked') == true) is always false..
either use
if ($('#checkall').is(':checked'))
or
if ( $('#checkall:checked').length )
Update after comment
Replace the entire third part (all the if/else) with
$('#checkall').live("change", function()
{
$('table input[name=choose]')
.attr('checked', this.checked)
.closest("tr")
.toggleClass("selected", this.checked);
});
demo at http://jsfiddle.net/gaby/KqwsZ/1/