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);
}
});
Related
I have 3 Jquery function. That is first function which allows to choose only one checkbox
$('input[type="checkbox"]').on('change', function () {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
That is second function which allows to choose a checkbox by clicking a row.
$(document).ready(function () {
$('.boekTable tr').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
That is third function which higlights the selected row.
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Problem: I select a row then third function highlights it and when i select another row, it keeps on highlighting till i click the highlighted row. How can i fix that? Should i use another function instead of closest? Thanx.
It's a straight-forward change to make it perform the way you want...
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
// this will remove all highlights before adding a new one
$(this).closest('table').find('tr').removeClass("highlight_row");
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Update third to something like that:
$("input[type='checkbox']").change(function (e) {
$(this).closest('table').find('tr').removeClass('highlight_row');
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
}
});
remove the highlight_row from the rest
$("input[type='checkbox']").change(function (e) {
$('tr').removeClass("highlight_row");
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
}
});
});
You need to remove class for other trs. You can use siblings function.
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
$(this).closest('tr').siblings().removeClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
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/
MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?
Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO
You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo
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
}
});
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();
}
});
});