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.

On change select, if item has the same value in dropdown check the checkbox

I am creating a dynamic dropdown list out of checkboxes. What I want is when the dropdown changes (on select) I want it to check the checkboxes with the same values or perhaps with the same name? I also want it to do vice versa, if you check a checkbox the select dropdown should change as well.
Here is my codepen - http://codepen.io/BryanBarrera/pen/QEXVxY
I am having issues writing this. Here is what I have. What is the best approach for this? How do I match up elements to change or check the checkboxes?
Any idea or suggestions would be much apprecated
"use strict";
var checkBoxes = $('.form-item'),
checkBox = $('input[type="checkbox"]'),
$select = $('<select></select>').appendTo('body').wrap('<div class="select-dropdown"></div>');
checkBoxes.each(function (n) {
var dataText = $(this).find('label').text();
var dataValue = $(this).find('input').val();
$select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
$select.on('change', function(){
var checkboxvalue = $(this).val();
var a = $(this).filter(function(){return this.value=='checkboxvalue'});
console.log(a);
console.log(checkboxvalue);
if (checkboxvalue == $(this).val() ) {
// alert('yup');
}
});

This will do the trick:
$select.on('change', function(){
var checkboxvalue = $(this).val();
$('input[value='+checkboxvalue+']').prop('checked', true);
});
checkBox.on('change', function(){
var selectValue = $(this).val();
$select.val(selectValue)
});
You probably want some other function to handle multiple selection, because you dropdown obviosly don't support multiple selection like checkboxes.
Example

You're setting the value of the checkbox element, but not actually checking the box. You also need to do this:
$('#checkbox-selector').prop('checked', true);

Get id of checked check boxes in a list on click of a button

I have a checkbox in each row. I have a button which deletes all the rows in which the check boxes are checked. For that, I have to get id of the rows where the checkbox is checked.I have written the following code. But not working. Pls help me out guys..
Button code : <a class="row-delete" align="left" onclick="deleteItem()"/>
function deleteItem(){
if (confirm("Are you sure you want to delete?")){
$(":checkbox").change(function() {
var notChecked = [], checked = [];
$(":checkbox").map(function() {
this.checked ? checked.push(this.id) : notChecked.push(this.id);
});
alert("checked: " + checked);
});
deleteAll(checked,0);
}
}
What is wrong in above code?

You are registering a change event handler in the deleteItem method that is not required, you need to just iterate through the checkboxes using .each() and update the required arrays
Also it is preferred to use .each() instead of .map() as you are not returning any value
function deleteItem(){
if (confirm("Are you sure you want to delete?")){
var notChecked = [], checked = [];
$(":checkbox").each(function() {
if(this.checked){
checked.push(this.id);
} else {
notChecked.push(this.id);
}
});
alert("checked: " + checked);
deleteAll(checked,0);
}
}

Remove onchange function from deleteItem because when you click on link it will re-init on change of checkbox elements
function deleteItem(){
if (confirm("Are you sure you want to delete?")){
var notChecked = [], checked = [];
$(":checkbox").each(function() {
id=this.id;
this.checked ? checked.push(id) : notChecked.push(id);
});
alert("checked: " + checked);
deleteAll(checked,0);
}
}
You can create an array of checked checkboxes like,
$(":checkbox:checked").each(function() {
checked.push(this.id);
});
And if you want to delete items onclick of checkbox then try like,
$(":checkbox").on('click',function() {
if($(this).is(':checked')){
alert($(this).attr('id'));// this item is ready to delete
}
});

Getting the value of the checkbox value that has been changed

I have several checkboxes on my page that each correspond to different courses. When the user checks the checkbox I want to sent a POST request to the server to add details of their enrollment to the database.
I have the following jQuery to take note of the change:
$(function () {
$("input:checkbox").change(function () {
var fullURL = document.URL;
var url = fullURL.split('userID=');
var userID = url[1];
var courseID =
alert(userID + "and " + courseID);
$.post('/Admin/EnrolUser/', postData, function (data) {
});
});
});
On my page there are several checkbox inputs, how can I retrieve the value of the selected checkbox that fired the event and set this to the var courseID variable.

Every jQuery function that deals with collections set's the value of this to be the current element.
So...
$("input:checkbox").on("change", function(){
$(this).val(); //Element that fired event
});

Inside your change function the variable this represents your checkbox.
$("input:checkbox").change(function () {
var fullURL = document.URL;
var courseID = $(this).val();
alert(courseID);
});
jsfiddle here

How to implement a click event on mutually exclusive checkboxes in jQuery?

I have two checkboxes:
<input id="outside" type="checkbox" value="1" data-gid="41820122" />
<input id="inside" type="checkbox" value="1" data-gid="41820122" />
I've made them mutually exclusive with:
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
});
});
This works fine. But I also want to add additional click functionality to the 'inside' checkbox. I want it to enable/disable a textarea on the same form, so I've done this:
$('#application_inside').click(function() {
if ($(this).is(':checked')) {
return $('textarea').removeAttr('disabled');
} else {
return $('textarea').attr('disabled', 'disabled');
}
});
So, if the 'inside' checkbox is checked, the textarea will be enabled, if it's not checked, the textarea should be disabled.
The problem is that if the 'inside' checkbox is checked, and the user then checks the 'outside' checkbox, the 'inside' becomes unchecked (as it should be), but the textarea remains enabled. This appears to be because the 'inside' checkbox was never actually clicked by the user.
I've tried working around this with the following:
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
checkboxes.triggerHandler("click"); //new code to fire any click code associated with unchecked boxes
});
});
But this just throws the browser in a loop, since the two different click events end up calling each other.
How can I keep my mutually exclusive code while still allowing the enable/disable code for the 'inside' checkbox to work?

You can create a custom event that you trigger when you click on #application_inside. Also you will fire this custom event when you uncheck other boxes because of the exclusiveness.
Here is an example: http://jsfiddle.net/gs78t/2/

you may try something like this
var insideChanged = function() {
if ($('#inside').is(':checked')) {
return $('textarea').removeAttr('disabled');
} else {
return $('textarea').attr('disabled', 'disabled');
}
};
$('#application_inside').click(insideChanged);
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
insideChanged(); //new code to fire any click code associated with unchecked boxes
});
});