I've got a base background image and two checkboxes. I need replace the background image (via toggle class) with the correct class depending on which checkbox is selected. If both checkboxes are selected I need it to show the black background.
http://jsfiddle.net/2k96D/6/
$('#ax_lab').change(function () {
if ($('#ax_ov').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_lab');
}
});
$('#ax_ov').change(function () {
if ($('#ax_lab').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_over');
}
});
My fiddle works perfectly when I select and deselect in the same order, however, if I de-select the checkboxes in a different order than the order I selected them in, it doesn't default back to the original class. I know there must be a flaw in my logic, I'm just having trouble finding it. Any thoughts?
You need to be more explicit with the logic. Here's what I did:
$(document).ready(function () {
function updateAxialStatus() {
var axOv = $('#ax_ov').prop('checked'),
axLab = $('#ax_lab').prop('checked');
$('.axial').removeClass('axial_all axial_lab axial_over');
if (axOv && axLab)
$('.axial').addClass('axial_all');
else if (axOv)
$('.axial').addClass('axial_over');
else if (axLab)
$('.axial').addClass('axial_lab');
}
$('#ax_lab, #ax_ov').change(updateAxialStatus);
});
That version just explicitly checks the status of the two checkboxes and updates the class to reflect the status. The same handler can be used for both checkboxes.
Note that old versions of IE may not fire the "change" event for checkboxes until the checkbox loses focus, but you can safely use "click" instead.
Related
guys. I have a problem that i can't resolve. I need to switch the behavior using ".on/.off" methods that will be working when i set or remove the tick from the checkbox. How can i do that?
For example: I have a button that will be zooming in/change color/moving by pressing on it. But when i set the tick on one of a checkboxes, i need to disable this event from the button using ".off" method.
I tried like
$(".button").on('click', function(){
$(this).toggleClass('active');
});
$(".button2").on('click', function(){
$(this).toggleClass('active2');
});
$(".button3").on('click', function(){
$(this).toggleClass('active3');
});
$(".button4").on('click', function(){
$(this).toggleClass('active4');
});
var check = $("#check");
check.change(function(){
if ($(this).is(':checked'))
{
$('.button').off('click');
}
});
but for some reason it will disable my event until i refresh the page, even if i remove the tick from one of my checkboxes
Thanks in advance.
This is happening because when you tick the checkbox, your code will remove the click listener from the .button element and you're not setting it back when the checkbox is unchecked.
So, if you want the click listener on the .button element to fire again when the checkbox is unchecked, you can do any one of the two things as mentioned below.
First, you can add an else block after the if block in the change listener of checkbox. Following code will work for this approach:
var check = $("#check");
check.change(function(){
if ($(this).is(':checked')) {
// This will remove the click listener from the button if checkbox is checked
$('.button').off('click');
}
else {
// This will again add the click listener to the button if checkbox is not checked
$(".button").on('click', function(){
$(this).toggleClass('active');
});
}
});
But I will not recommend the above approach because it will unnecessarily increase the size of code.
Here's the second and a better approach. Inside the click event handler function, you can add an if statement to check if the checkbox is ticked. Below is the code for the same:
$(".button").on('click', function(){
if (! $("#check").is(':checked')) {
// This will only be fired if checkbox is not checked
$(this).toggleClass('active')
}
});
You can add this if to any other block according to your requirement.
The main advantages of using the above code are:
Code will not be increased as compared to 1st approach
You don't need a change listener for the checkbox (Yeah! Just remove it!)
I am trying to toggle the visibility of some custom meta boxes via jQuery.
I managed to hide them by default and to make them visible when clicking on the correct post format.
I am not finding a solution for making the meta boxes disappear when the user changes the post format.
e.g.
Default: Hidden
Click on "Aside": Show
Switching from "Aside" to any other post format: hide.
I have the following code:
jQuery(document).ready(function () {
jQuery("#postbox-container-2").addClass("hidden");
if (jQuery("input#post-format-video").is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
jQuery("input#post-format-video").change(function () {
if (jQuery(this).is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
});
});
Any idea?
Different approach based on #zipp fiddle
Query(document).ready(function() {
jQuery( "#postbox-container-2" ).hide();
var toToggle='';
jQuery('input#post-format-video').change(function() {
if (toToggle){
jQuery(toToggle).hide();
}
//alert(this.value+ " is checked");
var selector='#postbox-container-2';
jQuery(selector).toggle();
toToggle=selector;
});
});
even this one works fine but does not change live when I click on a different radio button
Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.
//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
//if we have a radio button selected previously we hide the div related
if (toToggle){
$(toToggle).hide();
}
//select the div we want to show
var selector;
if ($(this).attr('id')=='post-format-video'){
selector='#postbox-container-2';
}
...
//show it (could have called toggle() )
$(selector).show();
//store it for the next selection
toToggle=selector;
I have a table and I use select menu in each row for different actions for that specific row.
For example:
$(document).on('change', '.lead-action', function() {
// Do stuff
}
this method gets the value of the selected option. Based on the selected value, I display different popups. When the user leaves the page, the select menu retains the previously selected option.
Sometimes users click on the same option in the select menu. When they do, the above code doesn't work.
Is there a way to invoke the code block above if the same option in the select menu is selected?
I'm gathering that you just want the dropdown to fire anytime a selection is made. If so, check out the answer to Fire event each time a DropDownList item is selected with jQuery.
See my updated answer below:
You can use this small extension:
$.fn.selected = function(fn) {
return this.each(function() {
var clicknum = 0;
$(this).click(function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
fn(this);
}
});
});
}
Then call like this:
$(".lead-action").selected(function(e) {
alert('You selected ' + $(e).val());
});
Update:
I'm actually rather unhappy with the original script. It will break in a lot of situations, and any solution that relies on checking the click count twice will be very fickle.
Some scenarios to consider:
If you click on, then off, then back on, it will count both clicks and fire.
In firefox, you can open the menu with a single mouse click and drag to the chosen option without ever lifting up your mouse.
If you use any combination of keyboard strokes you are likely to get the click counter out of sync or miss the change event altogether.
You can open the dropdown with Alt+↕ (or the Spacebar in Chrome and Opera).
When the dropdown has focus, any of the arrow keys will change the selection
When the dropdown menu is open, clicking Tab or Enter will make a selection
Here's a more comprehensive extension I just came up with:
The most robust way to see if an option was selected is to use the change event, which you can handle with jQuery's .change() handler.
The only remaining thing to do is determine if the original element was selected again.
This has been asked a lot (one, two, three) without a great answer in any situation.
The simplest thing to do would be to check to see if there was a click or keyup event on the option:selected element BUT Chrome, IE, and Safari don't seem to support events on option elements, even though they are referenced in the w3c recommendation
Inside the Select element is a black box. If you listen to events on it, you can't even tell on which element the event occurred or whether the list was open or not.
The next best thing is to handle the blur event. This will indicate that the user has focused on the dropdown (perhaps seen the list, perhaps not) and made a decision that they would like to stick with the original value. To continue handling changes right away we'll still subscribe to the change event. And to ensure we don't double count, we'll set a flag if the change event was raised so we don't fire back twice:
Updated example in jsFiddle
(function ($) {
$.fn.selected = function (fn) {
return this.each(function () {
var changed = false;
$(this).focus(function () {
changed = false;
}).change(function () {
changed = true;
fn(this);
}).blur(function (e) {
if (!changed) {
fn(this);
}
});
});
};
})(jQuery);
Instead of relying on change() for this use mouseup() -
$(document).on('mouseup', '.lead-action', function() {
// Do stuff
}
That way, if they re-select, you'll get an event you can handle.
http://jsfiddle.net/jayblanchard/Hgd5z/
I've looked at and tried numerous answers on this topic but can't seem to find a solution that works. I might be missing something obvious in which case I apologise but here's my problem:
I have a checkbox nested within a DIV element, this DIV element has a jQuery click event attached to it which then checks whether the checkbox is checked or not and then either checks/unchecks it. Depending on whether it has been checked/unchecked it then sends a variable to a PHP script to add into a session variable.
This all works fine when it's the DIV that has been clicked but when the checkbox is clicked I think some bubbling occurs as it fires the event for unchecking the checkbox every time. I've tried using stopPropogation(); and preventDefault(); attached to the checkbox click event but to no avail.
Here's some sample code to try and make this clearer:
Checkbox HTML code:
<div class='bundle_offer' id='bundle_offer_0'>
<input type="checkbox" />
</div>
Click function:
// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {
// IF its not the checkbox clicked, send over the div id
if (event.target.type !== 'checkbox') {
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id);
}
}); // end bundle offer click function
the bundle_offer_click function simply takes the id of the DIV clicked, finds the checkbox, checks/unchecks it and then sends the appropriate variable to the PHP script via AJAX.
EDIT:
I managed to fix the problem by moving round the logic a bit, here is what I changed it to:
// Click function on bundle offer div to add booster
$(".bundle_offer").mouseup(function (event) {
// Get whether checked or not
var isChecked = $(this).find('input').is(':checked');
// IF its not the checkbox clicked
// check/uncheck
// send over the div id
if (event.target.type !== 'checkbox') {
if(isChecked == false){
// Check
$(this).find('input').attr('checked',true);
}
else{
// Uncheck
$(this).find('input').attr('checked',false);
}
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
}); // end bundle offer click function
Main difference is using the mouseup function instead and doing the logic for checking/unchecking the checkbox within that mouseup function rather than the bundle_offer_click one.
In case you click on check box browser automatically check/uncheck checkbox. you don't need do that using JavaScript.
I believe inside bundle_offer_click you are checking/unchecking checkbox. you should pass a flag as second parameter in bundle_offer_click flag value should be depend on clicked element. and inside bundle_offer_click based on flag take action on checkbox.
code:
function bundle_offer_click(id, isCheckBoxClicked){
if(isCheckBoxClicked){
//do nothing on check box
}
}
I have links that when clicked, select all the checkboxes or deselect them.
I also have a dropdown list that I want to be made visible only if at least one of the checkboxes are selected.
What is the best way to do this?
Should I write login inside the code that selects/deleselects them or is there a better way to do this?
I would have a function that sets the dropdown's visibility. I would call this function from the click handlers for each of the checkboxes and from the link's handlers -- I'm assuming that your link handlers don't merely fire a click event on each box, but set it's status. Unless you have other behavior to trigger firing the click event on each checkbox will be very expensive. In your function that set's visiblity, use a test to see if the number of checked boxes is greater than 0 as the new state for the visibility.
function setDDVisibility() {
var isVisible = $('.checkbox-class-selector:checked').length > 0;
if (isVisible) {
$('#ddl').show();
}
else {
$('#ddl').hide();
}
}
$('.checkbox-class').click( function() {
... do stuff ...
setDDVisibility();
return false;
});
$('.link-selector').click( function() {
...set up checkboxes...
setDDVisibility();
return false;
});