Dynamically Uncheck All Checkbox's From Container Using A Textbox - javascript

fiddle - http://jsbin.com/OruFonU/1/edit
completed fiddle (for anyone who's in the same boat) - http://jsbin.com/OruFonU/15/edit
I'm trying to uncheck all checkbox's based upon the text in a texbox. If the textbox's value is equal to "Uncheck All" I want all checkbox's unchecked inside it's container div. (not all completely, just all inside the visible container)
I've tried the following but no luck.
.removeAttr('checked');
.attr('checked', false);
.prop('checked', false);
.is(':checked', false);
Here's the full JQuery/Javascript
$(document).ready(function() {
$('input[type=checkbox]').prop('checked', 'checked');
$('.show').hide();
$('.number-1').show();
$(".show-nums").on('load change', function() {
var val = $(this).val().toLowerCase();
if( $("." + val) && $("." + val).length ){
//check if there is a selector that corresponds to the value of the dropdown
$('.show').hide();
$("." + val).show();
}
});
$(".search").on('keyup change', function() {
var val = $(this).val();
if(val === "Uncheck All") {
$('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]').prop('checked', false);
}
});
});
If anyone can help me with this it'd be greatly appreciated.

It's because you wrap form inside p tag. Try to put your form inside div and it should work as expected
Demo

Basically your code would work. The thing that fails is the the selector for the inputs. You can fix that by fixing the selector for example juste use input[type=text].
There are other things you could improve, I have updated your jsbin:
http://jsbin.com/OruFonU/13/edit
you can dramatically simplify your code (and make it more readable) by doing this:
$(".show-nums").on('load change', function() {
var val = $(this).val();
$('.show').hide();
if( $("." + val) && $("." + val).length ){
//check if there is a selector that corresponds to the value of the dropdown
$("." + val).show();
}
});
side note: form tags are not allowed inside of paragraphs (p). Since inline elements are not allowed inside a p elements, the browser just assumes that the p tag was not closed and close it by him self. This is the result, and this is why your selector is not working:
The forms are not inside the P elements anymore.
If you have to stick to your HTML structure I would suggest you set the .number-n on the form tag.

you problem is that this selector:
$('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]')
returns [] empty.

just use $('input:checkbox').removeAttr('checked');
$(".search").on('keyup change', function() {
var val = $(this).val();
if(val === "Uncheck All") {
$('input:checkbox').removeAttr('checked');
});
I have used this in your fiddle and it works fine.
If you want to find specifically then you can use like this
$('.number-1').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-2').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-3').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-4').find('input[type=checkbox]:checked').removeAttr('checked');
You can also apply any loop here.

Related

Uncheck a Checkbox using Jquery

I have a page with a list of check boxes, when a check box is checked I am updating the number of check boxes selected in side a p tag. This is all working.
The problem I have is when the user selects more than 5 checkboxes I want to use Jquery to unselect it.
This is what I have so far, the first if else works but the first part of the if doe
$("input").click(function () {
if ($("input:checked").size() > 5) {
this.attr('checked', false) // Unchecks it
}
else {
$("#numberOfSelectedOptions").html("Selected: " + $("input:checked").size());
}
});
Any ideas?
Firstly you should use the change event when dealing with checkboxes so that it caters for users who navigate via the keyboard only. Secondly, if the number of selected checkboxes is already 5 or greater you can stop the selection of the current checkbox by using preventDefault(). Try this:
$("input").change(function (e) {
var $inputs = $('input:checked');
if ($inputs.length > 5 && this.checked) {
this.checked = false;
e.preventDefault();
} else {
$("#numberOfSelectedOptions").html("Selected: " + $inputs.length);
}
});
Example fiddle
Note I restricted the fiddle to 2 selections so that it's easier to test.
You need this $(this).prop('checked', false);
You should be saying
$(this).attr('checked', false)
instead of
this.attr('checked', false)
You need this $(this).prop('checked', false);
Also this is a javascript object, if you want to use jquery you should prefer $(this).

jQuery - set data() variable from $(this).val()

I have an e-mail form on my website, with four fields. Three text inputs and a text area. Each field has a default value attribute which serves as its label. I would like these values to be automatically unset/reset on their element's focus and focusout events.
I have the following JavaScript/jQuery code, which creates this behaviour.
$('input,textarea').data('default', "bleh");
$('input,textarea').focus(function() {
if($(this).val() === $(this).data('default')) {
$(this).val('');
}
});
$('input,textarea').focusout(function() {
if ($(this).val() === '')
{
$(this).val($(this).data('default'));
}
});
My problem comes in the storing of the initial data('default') attribute. I had tried using .data('default', $(this).val())... but apparently that is illegal and $(this) is not recognized.
I have tried to find a clean jQuery way to iterate over each of the elements, but I can't seem to find one.
Is there an easy way, using jQuery, to achieve what I want?
Unless I'm mistaken, there's no reason to be setting data properties on the element, you can make use of the elements defaultValue property:
$('input, textarea').focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
$('input, textarea').focusout(function() {
if (!$.trim(this.value).length) {
this.value = this.defaultValue;
}
});
Here's a fiddle
There is no this, because you're not in a callback. You'll have to iterate over each matched element, setting their default one at a time.
The "clean jQuery way" is simply with each:
$('input,textarea').each(function () {
$(this).data('default', $(this).val());
});
You need iterate through the input elements and then set the value to data using .each()
$('input,textarea').each(function(){
var $this = $(this);
$this.data('default', $this.val())
});

JS / jQuery - Filtering divs with checkboxes

I'm trying to filter some divs with checkboxes using the following code:
$("#filterControls :checkbox").click(function() {
$(".sectionContent").hide();
$("#filterControls :checkbox:checked").each(function() {
$("." + $(this).val()).show();
});
if($("#filterControls :checkbox").prop('checked') == false){
$(".sectionContent").show();
}
});
This works fine when you check the first checkbox, but it only filters with the others when you also have the first checkbox selected. It's hard to explain but try the JSFiddle: http://jsfiddle.net/BY9JL/
I don't want it to rely on having the first checkbox checked, is there a way around this?
Try
var sections = $('.sectionContent');
function updateContentVisibility(){
var checked = $("#filterControls :checkbox:checked");
if(checked.length){
sections.hide();
checked.each(function(){
$("." + $(this).val()).show();
});
} else {
sections.show();
}
}
$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();
Demo: Fiddle
It's because your last if check, it will only check the first checkbox if it is checked or not.
You could change your last if block to see if there are any checked at all:
if($("#filterControls :checkbox:checked").length == 0){
$(".sectionContent").show();
}

jQuery - Clear form field with .change event

I am using the following jQuery code to switch div displays based on a change event tied to 3 radio buttons:
(function ($) {
Drupal.behaviors.change_form_fields = {
attach: function(context, settings) {
$('div.form-item-payment-method input').each(function() {
if (this.value != 'existing-bill') {
$('div#' + this.value).css('display', 'none');
}
});
$('div.form-item-payment-method input').change(function() {
show_class = this.value;
$('div.form-item-payment-method input').each(function() {
if (this.value != show_class) {
$('input#edit-' + this.value).val('');
$('div#' + this.value).css('display', 'none');
} else {
$('div#' + this.value).css('display', 'block');
}
});
});
}
}
}(jQuery));
This works fine and dandy, but I want to add some more to it.
If a user selects a radio button, I want to blank/clear out the form fields in the other groups. Like the onload (.each), they have divs around the display content.
I tried using .attr and .val, but the form fields would not clear when selecting another radio button. What am I missing? jQuery 1.4x+
val('') should do the trick, so there must be some other issue with either the selector, or the code not being run.
Use the radio buttons change event that should help you.
$("input[type=radio][name=groupname]").change(function(){
//Code the clear the form fields or other logic here.
});

jQuery multiple radio buttons and load html code?

You think is right this way for show HTML code in each click on radio?
What is you propose to animate (effect) appropriate for show and hide html code?
see you example of my codes: http://jsfiddle.net/9LECb/
$('#housing_select input').click(function(){
var classes = $(this).attr('id');
if(classes == 'hotel_select'){
$('.hotel_apartment_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'hotel_apartment_select'){
$('.hotel_select, .suite_select').hide();
$('.'+classes).show();
}
if(classes == 'suite_select'){
$('.hotel_select, .hotel_apartment_select').hide();
$('.'+classes).show();
}
})
With respect
You can remove the if conditions and minimize the code to:
$('#housing_select input').click(function() {
var classes = $("." + this.id);
$('.hotel_apartment_select, .suite_select, .hotel_select').not(classes).hide();
classes.show();
})
JSFiddle: http://jsfiddle.net/9LECb/2/
Note:
You can check jQuery UI Tabs as they acheive a similar effect
Try this:
$('#housing_select input').click(function() {
$('.hotel_apartment_select, .suite_select, .hotel_select').not("." + this.id).hide();
$("." + this.id).show();
})

Categories