Develop Reference

show and hide divs with multiple class names jquery checkboxes

I have many dives with multiple classes as
<div class="my-gallery">
<div class="LargeFace Neutral Happy"></div>
<div class="Sad Neutral Happy"></div>
<div class="LargeFace Surprise Happy"></div>
<div class="LargeFace Fear Happy"></div>
</div>
And I have multiple check boxes which have all those values. e.g LargeFace or Happy and else.
<label class="with-label">
<input id="c_b" type="checkbox" name="r1" value="Neutral" />Neutral
</label>
<label class="with-label">
<input id="c_b" type="checkbox" name="r1" value="LargeFace">Large Face
</label>
Through this code I am getting all those checkbox values to an array
$('.with-label').on "click", ->
allVals = []
$('.with-label :checked').each ->
allVals.push $(this).val()
return
console.log allVals
return
Right now I am really really struggling for filtering my divs on the basis of this array values. for example. User have selected multiple check boxes and create an array as ["Happy", "Fear"]
I want to make something which will filter #my-gallery on the basis on that array. If there are 2 those values in an array then All those divs, which contain that classes should appear and other should disappear, So for other values? Is that possible? please help I am struggling with this for so long

Instead of pushing the values in array, You can create a class selector for the value and then push it in array.
$('.with-label :checked').each ->
allVals.push("." + $(this).val())
return
which will create the array as:
[".LargeFace",".Happy"]
Then use .join() to create the class selectors, traverse to parent and show them :
$('.my-gallery > div').hide(); //hide all first
$(allVals.join(',')).show(); //show based on array values

$('.my-gallery > div').each(() => {
if ($(this).attr('class').split(' ').some(className => allVals.includes(className))) {
$(this).show();
} else {
$(this).hide();
}
});
Place this directly after you create your allVals array.
It goes through all your gallery divs and checks if at least one of the classes belongs to allVals.
Older javascript syntax:
$('.my-gallery > div').each(function() {
if ($(this).attr('class').split(' ').some(function(className) {
return allVals.indexOf(className) !== -1;
})) {
$(this).show();
} else {
$(this).hide();
}
});

Try this.
In previous function of jquery use your element which need to be tackle
$('.with-label').on('click', function(){
$(this).closest('.with-label').prev(your_element).toggle();
});

Wp google maps pro checkboxes to behave like radio button

I'm having this problem with WP Google Maps Pro filters/categories. Basically the plugin offers to display the categories as select dropdown and checkboxes. And since the select dropdown proved not that much of an help I tried to implement the radio button functionality on the checkboxes.
So what I'm trying to do here is make these checkboxes behave like radio buttons. So when one is checked others become unchecked. There's a catch though. I have to make the click on the parent rather than on the child. The checkbox itself was requested by my client to be hid, since it breaks his design, and I have to make the functionality of the tab switching in order to filter the markers.
I've hidden the checkboxes with css, and I've styled the parent and added some icons with jquery. Below is the html layout.
<div class="parent">
<i class="category-icon-one"></i>
<input type="checkbox" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_4"
name="wpgmza_cat_checkbox" mid="1" value="4" tabindex="0">
First Category
</div>
<div class="parent">
<i class="category-icon-two"></i>
<input type="checkbox" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_4"
name="wpgmza_cat_checkbox" mid="1" value="4" tabindex="0">
Second Category
</div>
Here is the jQuery that I've managed to do so far:
$('.parent').click(function(){
$('.parent').each(function(){
$(this).find('input:checkbox').prop('checked', false);
});
$(this).find('input:checkbox').prop('checked', true);
});
So far this has not proved fruitful, so I need to find a way to make this radio button like functionality while clicking on the parent of the checkboxes. I would appreciate if some light were to shine on this. Thanks :)
EDIT: The plugin makes the filtering of the markers through this piece of code. This where the checked states are being registered only as clicks, and the clicked value then is being used to filter the markers. Hope this helps to clarify my issue!
jQuery("body").on("click", ".wpgmza_checkbox", function() {
/* do nothing if user has enabled store locator */
var wpgmza_map_id = jQuery(this).attr("mid");
if (jQuery("#addressInput_"+wpgmza_map_id).length > 0) { } else {
var checkedCatValues = jQuery('.wpgmza_checkbox:checked').map(function() {
return this.value;
}).get();
if (checkedCatValues[0] === "0" || typeof checkedCatValues === 'undefined' || checkedCatValues.length < 1) {
InitMap(wpgmza_map_id,'all');
wpgmza_filter_marker_lists(wpgmza_map_id,'all');
} else {
InitMap(wpgmza_map_id,checkedCatValues);
wpgmza_filter_marker_lists(wpgmza_map_id,checkedCatValues);
}
}
});

Nick from WP Google Maps here.
I'm a bit late to the party with this but I'll help where I can.
You can change the code to the following:
jQuery("body").on("click", ".wpgmza_checkbox", function() {
var wpgmza_map_id = jQuery(this).attr("mid");
var orig_element = jQuery(this);
if (jQuery("#addressInput_"+wpgmza_map_id).length > 0) { } else {
// get the value of the current checked checkbox
var checked_value = jQuery(this).attr("value");
if (checked_value === "0" || typeof checked_value === 'undefined' || checked_value.length < 1) {
InitMap(wpgmza_map_id,'all');
wpgmza_filter_marker_lists(wpgmza_map_id,'all');
} else {
InitMap(wpgmza_map_id,checked_value);
wpgmza_filter_marker_lists(wpgmza_map_id,checked_value);
}
// reset all other checkboxes
jQuery("input:checkbox[class^=wpgmza_checkbox]").each(function(i) {
if (jQuery(orig_element).attr('value') !== jQuery(this).val()) { jQuery(this).attr('checked',false); }
});
}
});
I've tested this and it works.

Jquery Chosen plugin. Select multiple of the same option

I'm using the chosen plugin to build multiple select input fields. See an example here: http://harvesthq.github.io/chosen/#multiple-select
The default behavior disables an option if it has already been selected. In the example above, if you were to select "Afghanistan", it would be greyed out in the drop-down menu, thus disallowing you from selecting it a second time.
I need to be able to select the same option more than once. Is there any setting in the plugin or manual override I can add that will allow for this?

I created a version of chosen that allows you to select the same item multiple times, and even sends those multiple entries to the server as POST variables. Here's how you can do it (fairly easily, I think):
(Tip: Use a search function in chosen.jquery.js to find these lines)
Change:
this.is_multiple = this.form_field.multiple;
To:
this.is_multiple = this.form_field.multiple;
this.allows_duplicates = this.options.allow_duplicates;
Change:
classes.push("result-selected");
To:
if (this.allows_duplicates) {
classes.push("active-result");
} else {
classes.push("result-selected");
}
Change:
this.form_field.options[item.options_index].selected = true;
To:
if (this.allows_duplicates && this.form_field.options[item.options_index].selected == true) {
$('<input>').attr({type:'hidden',name:this.form_field.name,value:this.form_field.options[item.options_index].value}).appendTo($(this.form_field).parent());
} else {
this.form_field.options[item.options_index].selected = true;
}
Then, when calling chosen(), make sure to include the allows_duplicates option:
$("mySelect").chosen({allow_duplicates: true})

For a workaround, use the below code on each selection (in select event) or while popup opened:
$(".chosen-results .result-selected").addClass("active-result").removeClass("result-selected");
The above code removes the result-selected class and added the active-result class on the li items. So each selected item is considered as the active result, now you can select that item again.

#adam's Answer is working very well but doesn't cover the situation that someone wants to delete some options.
So to have this functionality, alongside with Adam's tweaks you need to add this code too at:
Chosen.prototype.result_deselect = function (pos) {
var result_data;
result_data = this.results_data[pos];
// If config duplicates is enabled
if (this.allows_duplicates) {
//find fields name
var $nameField = $(this.form_field).attr('name');
// search for hidden input with same name and value of the one we are trying to delete
var $duplicateVals = $('input[type="hidden"][name="' + $nameField + '"][value="' + this.form_field.options[result_data.options_index].value + '"]');
//if we find one. we delete it and stop the rest of the function
if ($duplicateVals.length > 0) {
$duplicateVals[0].remove();
return true;
}
}
....

Using custom jQuery radio buttons with CakePHP Form Helper

I'm using a custom jQuery plugin to convert radio buttons to actual images, and it works with basic checkboxes, but when using Cake's built-in input form helper, it acts more as a checkbox by not unchecking the already clicked options. Not only that, but it isn't populating $this->data (or sending anything when the form is submitted).
The js looks like this:
//##############################
// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
// By Dharmavirsinh Jhala - dharmavir#gmail.com
// Date of Release: 13th March 10
// Version: 0.8
/*
USAGE:
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
}
*/
$(document).ready(function() {
$("#bananas").dgStyle();
var elmHeight = "15"; // should be specified based on image size
// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
dgStyle: function()
{
// Initialize with initial load time control state
$.each($(this), function(){
var elm = $(this).children().get(0);
elmType = $(elm).attr("type");
$(this).data('type',elmType);
$(this).data('checked',$(elm).attr("checked"));
$(this).dgClear();
});
$(this).mouseup(function() {
$(this).dgHandle();
});
},
dgClear: function()
{
if($(this).data("checked") == true)
{
$(this).addClass("checked");
}
else
{
$(this).removeClass("checked");
}
},
dgHandle: function()
{
var elm = $(this).children().get(0);
if($(this).data("checked") == true)
$(elm).dgUncheck(this);
else
$(elm).dgCheck(this);
if($(this).data('type') == 'radio')
{
$.each($("input[name='"+$(elm).attr("name")+"']"),function()
{
if(elm!=this)
$(this).dgUncheck(-1);
});
}
},
dgCheck: function(div)
{
$(this).attr("checked",true);
$(div).data('checked',true).addClass('checked');
},
dgUncheck: function(div)
{
$(this).attr("checked",false);
if(div != -1)
$(div).data('checked',false).css({
backgroundPosition:"center 0"
});
else
$(this).parent().data("checked",false).removeClass("checked");
}
});
The PHP/Html looks like this:
<span id="bananas-cat" class="cat">
<?= $this->Form->radio('bananas',array(),array('legend' => false, 'id' => 'bananas', 'name' => 'category')); ?>
<label for="bananas">Bananas</label>
</span>
While it upon first inspection may look correct, when clicked, nothing gets passed within $this->data and it acts like a checkbox and doesn't unselect the value when I add an additional radio checkbox.
Although the radio functionality does work without CakePHP's html form helper like so:
<span id="animals-cat" class="cat">
<input type="radio" name="category" id="animals" />
<label for="animals">Animals</label>
</span>
If anyone can help me out here, I would be forever indebted. I've been trying to solve this for way too long now that I'm considering just scrapping the whole idea to begin with.

What I would suggest is see and compare the HTML output of example and one being generated by CakPHP, try to make it similar to example so that you can get your custom-radio-buttons working.
But if you can not do that I would highly recommend to override those helpers by some parameters so that you can get the exact HTML as an output and Javascript should work flawlessly.
Let me know if that does not work for you.

Check and un-check checkboxes using Javascript

Hey guys im trying to get a checkbox scenario worked out, I have 7 boxes and im trying to get a logic statement where it works things out. I have 7 checkboxes and the 7th box is all of the above, when all of the above is clicked it deselects all of the previous ones, when 1-6 is selected it deselects the all of the above box. What ends up happening in my current code it deselects all of the 1-6 boxes and then they are now unable to click. Unfortunately i'm kind of constrained to things. so i'll paste my code any help greatly appreciated.
This is a snippet of very horrible coding, i just through this together while i was trying multiple ways to get it to work.
if (document.forms[0].propDetails[6].checked==true) {
for (var x=0;x<6;x++) {
document.forms[0].propDetails[x].checked=false;
}
}
else {
document.forms[0].propDetails[6].checked=false;
}
} // end of function

I first suggest that you give a specific NAME attribute to the 1-6 checkboxes, and parsing them using getElementsByName like so :
<input type="checkbox" id="myChk1" name="myChk" />
...
<input type="checkbox" id="myChk6" name="myChk" />
<input type="checkbox" id="myChkAll" onchange="chkAll(this);" />
<script type="text/javascript">
function chkAll(obj) {
var isChecked = obj.checked;
var chk1to6 = document.getElementsByName('myChk');
for (var i = 0 ; i < chk1to6.length ; i++) {
chk1to6[i].checked = isChecked;
}
}
</script>

Give different unique Id to all the checkboxs...
like
chckbx1
chckbx2
chckbx3
.
.
chckbx7
the call a same function on click of any of the checkbox with the object of that checkbox
i.e. onclick=functionname(this);
In side the function check the id
functioname(str){
if(str.id=="chckbx7"){
//deselect all except chckbx7
}
else{
//deselect chckbx7
}
}