I have two functions.
The first function translates a div click into a checked/unchecked toggle.
The second function translates a checkbox change into a hide/show event.
The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
if($(this).attr("checked")) {
$('.'+this.id).show();
}
else {
$('.'+this.id).hide();
}
});
});
</script>
The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
}
});
Don't bother with the first snippet. Just use LABEL elements:
<label><input type="checkbox">Some option</label>
Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.
The second snippet can be optimized:
$('input:checkbox').change(function() {
$('#' + this.id).toggle(this.checked);
});
you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:
$(document).ready(function() {
$(":checkbox").bind('change', function() {
if($(this).attr("checked")) {
$('#'+this.id).show();
}
else {
$('#'+this.id).hide();
}
});
});
Related
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
I have the following toggle function filter() where I display the childrow of a table when the <tr> parent is being clicked. In this function I've also included a key shortcut, so whenever ALT+A is pressed all the childrows are displayed.
In addition I have another script, mouseover(), where the background color of the parent tr is changed to #2C4367 hover.
So here's my question: How can I toggle the background-color of a tr parent whenever I expand (click on) it and back to normal when it is closed. This function should also work on all tr parents when the key shortcut is pressed, so the background color of all parent tr's is changed when the shortcut is being pressed.
I hope I made myself clear. Otherwise please say so and I will try to elaborate.
Toggle filter() script:
$(document).ready(function mouseover(){
$(".parent").hover(function(){
$(this).css("background", "#2C4367");
$(this).css("color", "#FFFFFF");
},
function(){
$(this).css("background", "#FFFFFF");
$(this).css("color", "#000000");
});
});
Change bgcolor mouseover() script:
$(document).ready(function filter() {
$('table.detail').each(function() {
var $table = $(this);
$table.find('.parent').click(function() {
$(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$childRows.show();
},
function() { $childRows.hide();
});
shortcut.add("Alt+A",function(){ funcVis() }); /// Shortcut functions
shortcut.add("Alt+N",function(){ expandform() }); /// Shortcut functions
});
});
Create a CSS class that defines the background-color change, and apply or remove it with
$(target).parent().toggleClass('yourclass');
Insert this line wherever the expand is triggered.
Solved!
JSFiddle
function toggle(it) {
if ((it.className == "") || (it.className == "rowactive")) {
it.className = "rownotactive";
} else {
it.className = "rowactive";
}
}
$(document).ready(function filter() {
$('table.detail').each(function () {
var $table = $(this);
$table.find('.parent').click(function () {
$(this).toggleClass('rowactive');
$(this).nextUntil('.parent').toggle();
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$("tr.parent").addClass('rowactive');
$childRows.show();
},
function () {
$("tr.parent").removeClass('rowactive');
$childRows.hide();
});
shortcut.add("Alt+N", function () {
expandform()
}); /// Shortcut functions
});
});
Here is script i wrote to achive searchable check box list but for some reason it is not acting please help!
It should search Regardless of Case and empty lines should be removed
$(function() {
$('#filter').on('keyup', function() {
alert('h');
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if (elem.value.indexOf(query) != -1) {
$(this).closest('label').show();
}else{
$(this).closest('label').hide();
}
});
});
Here is the fiddle http://jsfiddle.net/xHxWt/
UPDATE : Thanks Everyone : Down is the fully working fiddle posted it if anyone needs the same
http://jsfiddle.net/xHxWt/9/
You missed the jQuery plugin (which you already found out).
Also, a label doesn't have a value, you need to use .text() instead.
Try:
$(function () {
$('#filter').on('keyup', function () {
var query = this.value;
$('.checkboxLabel').each(function (i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).show();
$(this).prev(':checkbox').show();
} else {
$(this).hide();
$(this).prev(':checkbox').hide();
}
});
});
});
Fiddle
Update:
Hide / show checkbox as well.
You can try this code to hide label as well as checkbox
$(function() {
$('#filter').on('keyup', function() {
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).closest('label').show();
$(this).prev().show();
} else {
$(this).closest('label').hide();
$(this).prev().hide();
}
});
});
});
There is also plugin for multiple selection or single.you can try this one also.
http://harvesthq.github.io/chosen/
I don't get why this isn't working.. clickId is given the value access-toggle-all, when I click the checkbox with that classname, so it doesn't make sense (to me at least)..
$(document).ready(function() {
$('input:checkbox').click(function (e) {
var clickId = $(this).attr('class');
if (clickId == 'access-toggle-all') {
alert("if");
$('.access-toggle,.access-group-toggle').prop('checked', this.checked);
} else {
alert("else");
}
alert(clickId);
});
});
I dont know what your issue was, but it was not your use of single or double quotes unless they were inconsistent opening and closing quotes.
I suspect it was something to do with the element being clicked having more than just the class access-toggle-all so this comparison failed:
if (clickId == 'access-toggle-all') {
The correct way to do this logic using jquery is with .is() or hasClass():
$('input:checkbox').click(function (e) {
if ($(this).is('.access-toggle-all')) {
alert("if");
$('.access-toggle,.access-group-toggle').prop('checked', this.checked);
}
});
or
$('input:checkbox').click(function (e) {
if ($(this).hasClass('access-toggle-all')) {
alert("if");
$('.access-toggle,.access-group-toggle').prop('checked', this.checked);
}
});
Please look at the code here : http://jsbin.com/esokic/10/edit#source
When I click on customer support a div is shown
What I want is when someone clicks out of the div, the div should hide, I tried a couple of things, but they don't seem to work..
$(document.body).one("click", function() {$(".cust-support-outer").hide();
});
Also:
$("body").click(function(e){
if(e.target.className !== "csupport-drop")
{
$(".cust-support-outer").hide();
}
});
Would appreciate any help...
--Arnab
Arnab
I did this change in your js and worked
try this, use this js code
$(function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(document).bind("click", function(e) {
if(!$(e.target).hasClass("get-daily-alerts-outer")){
$(".get-daily-alerts-outer").hide()
}
});
$(".close").click(function(){$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){$(".get-daily-alerts-outer").show();
return false
});
});
I just changed how you bind the "click" event to the document and pass the Event object to the function so you can check over what element the click event was fire.
Try:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.cust-support-outer').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.cust-support-outer').hide();
});
});
Bind this to body
$("body").click(function() {
if ($(this).attr("class") == "cust-support-outer") {
// inside
} else {
// not inside
}
});