Develop Reference

How to hide or show divs based on checkbox change event

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.

Some questions around clone/copy TR

I have this code for clone/copy a tr element from a modal to a page.
$(function () {
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("input:checkbox").attr('checked', $toggle);
$('#btnAplicarNorma').prop('disabled', !$toggle);
});
$('#resultadoNormaBody').on('change', 'input[type=checkbox]', function () {
var $my_checkbox = $(this);
var $my_tr = $my_checkbox.closest('tr');
if ($my_checkbox.prop('checked')) {
$my_tr.addClass('copyMe');
}
var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');
$all_checkboxes.each(function () {
if ($(this).prop('checked')) {
$('#btnAplicarNorma').prop('disabled', false);
return false;
}
$('#btnAplicarNorma').prop('disabled', true);
});
});
$('button#btnAplicarNorma').on('click', function (ev) {
var $tr_to_append = $('#resultadoNormaBody').find('tr.copyMe');
$('#tablaNorma').removeAttr('style');
$('#alertSinNorma').hide();
if ($tr_to_append.length) {
$tr_to_append.find('input[type=checkbox]').prop('checked', false);
$tr_to_append.clone().appendTo('#normaBody').removeClass('copyMe');
$tr_to_append.removeClass('copyMe');
$(this).prop('disabled', true);
}
});
});
But I'm having some issues:
If I mark all checkboxes using the first on the table head then I the code stop working and doesn't clone any tr even if all of them are marked
How do I avoid to clone/copy the same tr twice?
It's possible to modify the checkbox before clone it? If you take a look at the example you'll notice how the clone tr copy exactly as the one on the modal and I want to uncheck the checkbox first, it's possible?
Here is a fiddle to play with, any advice?

The main problem is that your checkboxes inside the table do not really get properly triggered when you programmatically set them selected. To make sure all associated Events get properly triggered you should be triggering a .click() event instead:
$("#resultadoNormaBody").find("input:checkbox").click();
to ensure that you don't end up with duplicate clones the easiest thing is to not clone all the rows in one batch, but iterate thru them, and comparing the html to the ones that have already been added like this:
//fetch all the rows that have already been cloned
var clonedRows = $("#normaBody").find("tr");
//iterate thru all the rows that have been checked
$.each($tr_to_append, function (i, v) {
var added = false;
//fetch their html (for easier compare)
var currentRowHtml = $(v).html();
//now compare against the rows that have already been cloned
$.each(clonedRows, function (i, cRow) {
var clonedRowHtml = $(cRow).html();
if (currentRowHtml == clonedRowHtml) {
added = true;
}
});
//if the row hasn't been added yet- go ahead and clone it now
if (!added) {
$(v).clone().appendTo('#normaBody').removeClass('copyMe');
}
});
Here's a link to your updated fiddle:
http://jsfiddle.net/wq51zL9x/4/
Here is some more info on comparing table rows: Compare two tables rows and remove if match
and here's the more elaborate answer to using .click()
Need checkbox change event to respond to change of checked state done programmatically

Uncheck row checkbox if inputs are empty on blur?

I have 2 issues here. Clicking an input on a row should check the row's checkbox. Currently, only the first text input will check the checkbox because of .prev(). Is there a different way to do this? All inputs for that row should check that row's checkbox.
// check checkbox for clicked row
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').prev().find('input').prop('checked', true);
});
Also, the second block of code isn't working as it should. If you focus on a different row, if the text inputs from the previous (or any) row are blank - remove the checkbox. The checkbox will be a save, and there is no point of saving blank text inputs.
// remove check in inputs are empty for that row
$('input[type=text]').blur(function () {
$('table tr').each(function () {
if ($(this).find('input[type=text]:empty').length()) {
$('td').find('input').prop('checked', false);
}
});
})
http://jsfiddle.net/Ldge5qzn/

Find the closest tr instead and then find the inputs that are checkboxes and set the checked property
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
For the second part, the :empty selector tests against the element having child elements not against empty values so that has to also be modified. Loop through each rows text inputs set a flag if any of them are not empty. Set checkbox accordingly
$('table tr').each(function () {
var emptyRow = true;
$(this).find("input[type=text]").each(function(){
if($(this).val().length > 0) {
emptyRow = false;
}
});
if (emptyRow) {
$(this).find('input[type=checkbox]').prop('checked', false);
}
});
JSFiddle Demo

You can do it by checking the closest tr - then finding the checkbox in that tr
$('table').on('click', 'input[type=text]', function () {
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
});
Same thing with the second problem - check using the closest tr
Then you can use filter to get all the text inputs with values
Then check the length to see if there are any inputs returned - and set the checked property accordingly using .prop('checked',function()
$('input[type=text]').blur(function () {
var $tr = $(this).closest('tr'); // get closest tr
// get all of input[type=text] with value in that row
var inputsWithValue = $tr.find('input[type=text]').filter(function () {
return $.trim(this.value).length;
});
// set the checked to true if any element has value - else set checked to false
$tr.find('input[type=checkbox]').prop('checked', function () {
return inputsWithValue.length;
}).length;
});
FIDDLE

have a look at this .Hope this helps ...
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').parent('tr').find('input[type="checkbox"]').prop('checked', true);
});
full code below :-
JSFiddle

How to know with jQuery that a "select" input value has been changed?

I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?

You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});

First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});​
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});

First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});​

You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change

How to select other checkbox when the last value is checked

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'));
});