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/
Related
I want to make multiple checkboxes to be "checked" with mouse click-and-drag.
It works with my script:
var $j = jQuery.noConflict();
$j(window).load(function () {
$j(".filterset").selectable({
filter: 'label',
stop: function () {
$j(".ui-selected input", this).each(function () {
this.checked = !this.checked
});
}
});
});
JsFiddle
But it works only when you click and drag on the "labels" but not on the checkbox itself.
How to modify the javascript, to get this work?
Figure this out... I saw that you already had a padding for each of the labels that overlapped onto the checkbox, so in theory it should've worked. The only issue was that the checkbox was actually above the label.
All you needed was some CSS added to the input checkbox to make sure the label was above it and it works like a charm :
Fiddle
.filterset input {
display: inline-block;
z-index: -1;
}
I change the selector for the input element and it appears to work (although a little 'touchy')-
http://jsfiddle.net/jayblanchard/3WL4D/5/
var $j = jQuery.noConflict();
$j(window).load(function () {
$j(".filterset").selectable({
//filter: 'checkbox', // turned out to be unimportant
stop: function () {
$j(".ui-selected :checkbox", this).each(function () { // note the change
this.checked = !this.checked
});
}
});
});
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);
}
});
I need to hide an H1 title if the list is emptied.
basically i am saying. Choose from the select dropdown; if the selected value is shown hide all others. Now I also need to say if list category[h1] title is empty hide that too, otherwise display the h1 title.
http://jsfiddle.net/ajandthensome42/8Ye87/4/
If anyone could help I would be super grateful.
$(document).ready(function(){
$("#selectForm").change(function(event) {
$(".all").hide();
$("." + this.value).fadeIn("slow");
$(".multi").fadeIn("slow");
var size = $(".language-list li").size();
if(size === 0){
$(".language-list h1").hide();
}
else {
$(".language-list h1").show();
}
});
});
Loop through all your h1 tags and show/hide based on whether the adjacent list has any visible elements. Try this:
$( ".language-list h1" ).each(function() {
if ($(this).next('ul').find('li:visible').length === 0) {
$(this).hide();
} else {
$(this).show();
}
});
To put it in context, here's the complete change handler:
$(document).ready(function() {
$("#selectForm").change(function(event) {
$(".all").hide();
$("." + this.value).fadeIn("slow");
$(".multi").fadeIn("slow");
$( ".language-list h1" ).each(function() {
if ($(this).next('ul').find('li:visible').length === 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
Use the following simple code to check the amount of list-items:
var size = $(".language-list li").size();
if(size === 0)
{
...
}
When the page is loaded (the first dropdown (div StatusID) is dynamically populated from the mysql db) or the user selects Unemployed - EI from the first dropdown box, the div status_sub_6 shows the second select statement.
My .hide .show function activates fine on change but the function hides the second dropdown list on the loading of the page even if the dynamically populated values of the first select (StatusID) meet the compare criteria.
I'm sure that I need an onload function which overrides the following .js code but would really appreciate a bit of help in composing the additional code.
JavaScript:
$(document).ready(function(){
$('#status_sub_6').hide();
$('#StatusID').change(function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
});
You can do this by triggering a change event right after load.
$(document).ready(function(){
...
// your current code
...
$('#StatusID').trigger('change'); // trigger a change
});
try:
$(function() {
$('#status_sub_6').hide();
$(document).on('change', '#StatusID', function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
$('#StatusID').change();
});
You could also do this:
$(document).ready(function(){
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').hide();
}
$('#StatusID').change(function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
});
or a bit more elegant solutions:
$(document).ready(function () {
toggleSub();
$('#StatusID').change(function () {
toggleSub();
});
});
function toggleSub() {
if ($('#StatusID option:selected').text() == "Unemployed - EI") {
$('#status_sub_6').hide();
}
else {
$('#status_sub_6').show();
}
}
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();
}
});
});