We Keep Coding

Hide element on checkbox click/check, re-insert element on checkbox uncheck

Im learning Jquery so please bear with me here I would like to hide / remove a DIVs content if a checkbox is check>
When checkbox is unchecked I would like the DIVs content to re-appear,(which was hidden on checkbox checked.)
I have managed to solve part 1 of the problem, hiding the content but Im stuck on getting content re-appear.
YOU CAN VIEW MY JSFIDDLE HERE
Any help appreciated

$(function() {
$('.return_to_pickup_location').click(function() { //fire when the button is clicked
$('form input:checkbox').each(function() {
var checkbox = $(this);
if(checkbox.is(':checked'))
$('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
});
Just add show to the element in else block.

If you have single checkbox no need to have for each loop
Updated fiddle
$(function() {
$('#return_to_pickup_location').click(function() { //fire when the button is clicked
if($(this).is(':checked'))
$('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});

you have done coding on only if condition try to add else condition also to get your required result like below code
$(function() {
$('.return_to_pickup_location').click(function() { //fire when the button is clicked
$('form input:checkbox').each(function() {
var checkbox = $(this);
if(checkbox.is(':checked')) $('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
});

Toggle checkbox background-color using jQuery

I am using the Bootstrap Tree to create a nested checkbox list(http://jhfrench.github.io/bootstrap-tree/docs/example.html), however, I want to make the checked item highlighted, as well as have the children highlighted when the parent is selected. I've got it kind of working, but now when the parent is selected, the background-color on the individual child won't toggle when unchecked. i.e. it only toggles when its parent is not selected.
See jsfiddle: https://jsfiddle.net/tqku87ym/7/
$(function checkbox() {
$("input[type='checkbox']").change(function () {
$(this).siblings('ul')
.find("input[type='checkbox']")
.prop('checked', this.checked);
$(this).parent('li').toggleClass("highlight");
});
});

I've edited your code in a new fiddle: https://jsfiddle.net/pjrzbbea/.
I've introduced a separated highlight class for the children, which also has a background color overlapping the parent's background color. The JS part now also removes the highlight class from the child elements, if the parent element gets highlighted - so the children get resetted correctly.
$(function checkbox() {
$("input[type='checkbox']").change(function () {
var highlightChildClass = 'highlightChild';
$(this).siblings('ul')
.find('li')
.removeClass(highlightChildClass)
.find("input[type='checkbox']")
.prop('checked', this.checked);
var highlightClass = 'highlight';
if ($(this).closest('ul[role="group"]').length > 0) {
highlightClass = highlightChildClass;
}
$(this).parent('li').toggleClass(highlightClass);
});
});

You can't toggle the class if the way to change the background can come from multiple sources. When you change the parent, you'll have to clean the children. Here is the sample code modified. https://jsfiddle.net/wgpahro4/
$(function checkbox() {
$("input[type='checkbox']").change(function () {
$(this).siblings('ul')
.find("input[type='checkbox']")
.prop('checked', this.checked);
//ADDED CODE STARTS HERE!!!!!!!!!!!
//Clean up children
if($(this).parent().hasClass("parent_li")){
if(!this.checked){
$(this).siblings("ul").find("li").removeClass("highlight");
}
}
//ADDED CODE ENDS HERE!!!!!
$(this).parent('li').toggleClass("highlight");
});
});

If you want each child checkbox to highlight while the parent checkbox can still override, something like this will work:
$(function checkbox() {
$("input[type='checkbox']").change(function () {
if ($(this).siblings('ul').length > 0) {
var children = $(this).siblings('ul').find('input');
children.prop('checked', this.checked).change();
}
else {
var item = $(this).parent('li');
this.checked ? item.addClass('highlight') : item.removeClass('highlight');
}
});
});

Prop checked checkbox for selected row(s)?

On my table clicking the row will highlight it, and should also check the corresponding checkbox. Furthermore if the checkall checkbox is checked, all rows should be highlighted. If the checks remove, the highlights should be removed. I cannot give ids and would like to do this dynamically with .find() or .closest() or something similar. Any ideas? Thanks in advance! http://jsfiddle.net/7vLdxddr/3/
jQuery
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$("input[type=checkbox].checkall").on("click", function () {
$(this).parents('.table:eq(0)').find('input:checkbox').prop('checked', this.checked);
});

Use an instance of this (which refers to the row clicked on) and find
$(this).find(":checkbox").prop("checked", true);
http://jsfiddle.net/2wpmxdp0/1/

Use the checked property to add and remove class.
$('table').on('click', 'tr', function () {
var $this = $(this),
$rowCheckbox = $this.find(":checkbox");
// Add and remove class based on the class on the row
// You can always use this as the event is bound to the
// row which is clicked. So can use the this context
if ($this.hasClass('selected')) {
$this.removeClass('selected');
// Uncheck the checkbox if already selected
$rowCheckbox.prop('checked', false);
} else {
$this.addClass('selected');
$rowCheckbox.prop('checked', true);
}
});
// No need to use the checkbox selector again
// You have already added the class to it
$(".checkall").on("click", function (e) {
// To make sure the row event is not fired
// due to event bubbling
e.stopPropagation();
var isChecked = this.checked,
$table = $(this).parents('.table:eq(0)'),
$rows = $table.find('tr');
$table.find('input:checkbox').prop('checked', isChecked);
this.checked ? $rows.addClass('selected') : $rows.removeClass('selected');
});
Updated Fiddle

Clearing/Un-selecting Radio button on second click

I have a LOT of radio buttons on a form I'm creating.
The reason why I am using radio buttons and not check box's is because I only want to let a user select one or none.
The bad thing about a radio button though is, once selected, it can't be undone. I am trying to add the feature of clearing a group of radio box's when it's clicked for the second time.
My method that I am implementing now works if I have a group of radio buttons I want to target individually but not if I want to implement it for ALL radio button groups on the page.
When I use multiple radio button groups, it will randomly un-select a radio button when I try to select a different option.
If anyone could help me out, it would be greatly appreciated.
JSFIDDLE for only one group of radio buttons (works)
If you change to this code instead and target an individual name, it works.
$('input[name="rad"]').click(function()
JSFIDDLE for multiple groups of radio buttons (doesn't work)
I am trying to be able to target all my radio button groups at once, because there are a LOT.
$(function(){
$('input[type="radio"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
});
});

So you just need a way to check/uncheck reliably by name groups.
Something like this should work:
$('input[type="radio"]').on('click change', function () {//on click/change
$(this).prop('checked')//if checked
? $(this).prop('checked',false).data('waschecked', false)//uncheck
: $(this).prop('checked',true).data('waschecked', true)//else check
.siblings('input[name="'+$(this).prop('name')+'"]').data('waschecked', false);//make siblings false
});
kept the .data('waschecked', ...) in case you needed to have that value, but it works without it like this:
$('input[type="radio"]').on('click change', function () {//on click/change
$(this).prop('checked')//if checked
? $(this).prop('checked',false)//uncheck
: $(this).prop('checked',true);//else check
});
made a fiddle: http://jsfiddle.net/filever10/ZUb65/

Try changing the line to use the name attribute of the clicked radio in the selector expression
$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
You just need to clear your "waschecked" flag on the other radios of the same group.
http://jsfiddle.net/jammykam/BtLxY/15/
And just in case you do need to target using onchange: http://jsfiddle.net/jammykam/BtLxY/27/
$('input[type="radio"]').on('change', function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
});

If you are using a simple primary to secondary relationship then try this out:
$('input[type="radio"][name="main_radios"]').on('change', function(){
$('input[type="radio"][name="secondary_radios"]').prop('checked', false);
$('input[type="radio"][name="third_radios"]').prop('checked', false);
$('input[type="radio"][name="fourth_radios"]').prop('checked', false);
// combine it all into one call if you really feel like it
$('input[type="radio"][name="secondary_radios"], input[type="radio"][name="third_radios"], input[type="radio"][name="fourth_radios"]').prop('checked', false);
});
Uncheck all radios that are not "this" name
// Listen for ANY radio to be changed
$('input[type="radio"]').on('change', function(){
// remember name of selected radio
var checked_name = $(this).attr('name');
// target only radios that are not "this" name and uncheck them
$('input[type="radio"]').filter(function(){
if($(this).attr('name') != checked_name){
return true;
}
else{
return false;
}
}).prop('checked', false);
});

select only one checkbox and add class for the checked input

I have a list of checkbox and want to select the only one check box and add the class for the checkbox input and select another checkbox remove that class from the existing checkbox
$('input.myclass').click(function ()
{
var id = $(this).attr('id').replace('image-','');
$('input.myclass:checked').not(this).removeAttr('checked');
var sFilter = "";
$('input.myclass[type=checkbox]').each(function () {
sFilter = sFilter + (this.checked ? $(this).val() : "");
});
check();
});
function check(){
var a = $('input:checkbox[name=cover_image]:checked').val();
alert(a);
}
I want to select only one checkbox and class for the checked checkbox if that checkbox not checked then remove the class for that

If you really want to use checkboxes(and not radio buttons) for some reason, do something like this:
$('input:checkbox').on('click', function () {
$('input.selected').removeClass('selected').prop('checked', false);
$('input:checked').addClass('selected');
});
Edit: Removing the attribute works, but property manipulation is a slighty better way of doing it(as suggested by RobG)

For your purpose first remove classes from all checkbox and unchecked them and then add class to clicked checkbox and checked it as below
$("input[type='checkbox']").on('click', function () {
$("input[type='checkbox']").removeClass('selected').attr('checked', false);
$(this).addClass('selected').attr('checked', true);
});
Check this Fiddle for your question

you may use on() to listen the changes on group of checkboxes.
var $checkBoxes = $(":checkbox").on("change", function () { // Here listening the changes on checkbox using on()
$checkBoxes.removeClass("change").attr("checked", false); // remove the class from existing Checkbox
$(this).addClass("change").attr("checked", true); // adding the class for the currenly checked checkbox
});
working FIDDLE is here