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
}
}
Related
So the page must show a div if a checkbox is checked, and hide it when it is unchecked. But I am using localstorage so it shouldn't hide on load of the page but only when it is unchecked. If it is possible, it should be usable for a lot of checkboxes (37 exactly).
My Code:
HTML:
<div id="mob1-div" class="row hide one">Mobilisern1</div>
<div id="mob2-div" class="row hide-div">Mobilisern2</div>
<div id="mob1" class="targetDiv">Mobiliseren 1<input type="checkbox" class="checkbox chk" value="one" data-ptag="mob1-div" store="checkbox1"/></div>
<div id="mob2" class="targetDiv">Mobiliseren 2<input type="checkbox" class="checkbox" data-ptag="mob2-div" store="checkbox2"/></div>
Javascript:
$(function() {
var boxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.hasAttribute("store")) {
setupBox(box);
}
}
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
console.log(oldVal);
box.checked = oldVal === "true" ? true : false;
box.addEventListener("change", function() {
localStorage.setItem(storageId, this.checked);
});
}
});
$(function(){
$(".chk").on('change',function(){
var self=$(this);
var aData= self.attr("value");
$("."+aData).toggleClass('hide')
});
});
The problem with this code is that when you check the box the div shows, but if you reload the page the box is still checked. Although, the div isn't visible anymore.
Your issue seems to be centered around the fact that your second checkbox did not specify a value attribute (which all checkboxes need to have for them to make any sense).
I made a few adjustments to your code to make it more valid and compact (replaced store with data-store, used a ternary operator instead of if/then, combined the two document.ready functions into one, and changed your for loop to a forEach). These changes aren't part of the issue, but they do allow for your code to be more brief, which aids in troubleshooting.
localStorage doesn't work in the Stack Overflow snippets, but a working version can be seen in this Fiddle.
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.
I wanted to have a single checkbox in a form but i need to implement multiple scenarios but not sure if this is possible using a single checkbox or if i need radio buttons . Please advise
box shown and checked: Accepted / yes
(hidden)Box shown and not checked: Declined / no
Box not shown: Not Shown / blank
not sure if this is possible using a single checkbox
box shown and checked: Accepted / yes
(hidden)Box shown and not checked: Declined / no
Box not shown: Not Shown / blank
if the requirements 1/2/3 can be met using a single checkbox .The reason i ask is a single checkbox can hold only one value and if there is a way i can alter the value in Jquery dynamically still satisfying all the requirements.
Yes, it is possible. You can create an object having properties set to selectors :checked, :not(:checked, :hidden), :hidden; with corresponding values set to yes, no, blank. Set variable at change event handler using for..in loop, .is()
var obj = {
":checked": "yes",
":not(:checked, :hidden)": "no",
":hidden": "blank"
};
var curr;
$(":checkbox").change(function() {
for (var prop in obj) {
if ($(this).is(prop)) {
curr = obj[prop]; break;
}
}
// do stuff with `curr`
console.log(curr);
});
// check `:hidden`
$(":checkbox").prop("hidden", true)
.change() // `curr` should log `blank`
.prop("hidden", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="checkbox" />
I have created one sample onchange function where you can handle mutiple events
codepen URL for reference:
http://codepen.io/nagasai/pen/xOGNYW
<input type="checkbox" id="checkTest" onchange="myFunction()">
<input type="text" id="myText" value="checked">
#myText
{
display:none;
}
function myFunction() {
if (document.getElementById("checkTest").checked) {
document.getElementById("myText").style.display = "block";
} else {
document.getElementById("myText").style.display = "none";
}
}
I swear I'm going to learn more JavaScript...
I have this page (which really an include file in another ASP page, but I copied the correct HTML and made it so it'd load by itself for my testing purposes):
FO Samples
This is how it should show when they first load it. If they choose one of the other radio buttons, it should HIDE the 2 dropdown boxes. Using this code (something I found from someone else's question on here), its working.
<script type="text/javascript">
function ChangeDropdowns(value) {
if (value == "0") {
document.getElementById('SAMPLEDROPDOWN').style.display = 'block';
}
else {
document.getElementById('SAMPLEDROPDOWN').style.display = 'none';
}
}
</script>
But I can't figure out how to make it show them again if they go back to the "I wanna pick my own!" radio. The value of SAMPGROUP is the ID from the database of that sample category group. So it won't necessarily be in numerical order, it might skip #'s (if we delete a category or something). Basically, it should show the dropdowns if SAMPGROUP = 0 and not if its anything else!
I tried changing my code to this (95 being the value of SAMPGROUP for the "Autumm" option), but it doesn't seem to have made a difference.
<script type="text/javascript">
function ChangeDropdowns(value) {
if (value == "0") {
document.getElementById('SAMPLEDROPDOWN').style.display = 'block';
} else if (value == "95") {
document.getElementById('SAMPLEDROPDOWN').style.display = 'none';
}
else {
document.getElementById('SAMPLEDROPDOWN').style.display = 'none';
}
}
</script>
Any help would be greatly appreciated!!
Mahalo!
You are not setting the "value" in your onchange event, thus it's never equal to 0. Try changing this:
<input type="radio" name="SAMPGROUP" value="0" OnChange="Javascript:ChangeDropdowns()" checked />
to
<input type="radio" name="SAMPGROUP" value="0" OnChange="Javascript:ChangeDropdowns(0)" checked />
Here is the fiddle.
Good luck.
You may not be passing any value to the parameter "value" on calling the function ChangeDropdowns. Please ensure you pass the value like ChangeDropdowns(0) etc..
I have a two set of input checkbox in one page. and I have added a "checked" function to each set and each has different functionality.
I will set an example,
<div id="set1">
for(var i=0;i<n;i++)
<input type="checkbox" class=filter[i] onclick="clickCheck(filter[i])">array values
}
</div>
<div id="set2">
(for var j=0;j<n;j++)
<input type="checkbox" name="facets" value=array[j]>array values
}
</div>
Ive used jquery functions like
$("#set1 :checkbox").click(checkFacetSelectionCount);
checkFacetSelectionCount()
{
$('#set1 :input[type=checkbox]:checked').each(function() {
alert("Checked");
}
and
clickCheck(s)
{
if ($("#set2").is(':checked'))
{
alert(s);
}
else
{
alert("Nothing Checked");
}
, These two functions get activated on click on checkbox, so what happens is that whenever I click on any of the set, both set of functions will get activated. How can I prevent this? How can I differently call these two functions?
I think that
first one should
$('#set1 :input[type=checkbox]:checked')
{function body;}
and another should
$('#set2 :input[type=checkbox]:checked')
^ 2 instead of 1
{function body;}