JQuery :: Multiple Checkbox Toggle Respective DIV
Mar 9, 2010
I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div.
<html>
<head>
<title>jquery to Show/Hide a Div</title>
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").removeAttr("checked");
$("input").click(function(){ .....
View 1 Replies
ADVERTISEMENT
Mar 9, 2010
I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div.
<html>
<head>
<title>jquery to Show/Hide a Div</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
[Code].....
View 2 Replies
View Related
Oct 29, 2010
I am trying to make a multiple checkbox filter. It works by selecting/unselecting checkboxes the divs with classes revered to the checkboxes will activate deactivate.
This is the javascript I founded on the net:
Code:
<script type="text/javascript">
$(document).ready(function(){
$("#events li."+$("input.type_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.type_check").attr('id')).slideUp();
$("#events li."+$("input.start_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.start_check").attr('id')).slideUp();
$("#events li."+$("input.place_check").attr('id')).addClass('type_hidden');
$("#events li."+$("input.place_check").attr('id')).slideUp(); .....
To see it working online look here: [URl]
There two problems. I want to replace the sliding effect. I want to make a table with the divs in it. And when a div is deactivated the text or image shows grey and the link is disabled and when activated the text/image shows black/color and the link is enabled. So when you uncheck/check the boxes the divs will toggle between the two styles clickable and unclickable. I also want to make a second checkbox/radio row with different css styles to choose from. When a style is selected and you click on a link in div it will send you to the page with the selected style.
View 6 Replies
View Related
Aug 6, 2010
I have an <input type="checkbox"> whose immediate parent is an <a> tag. The <a> is significantly larger than the <input>.
I want the checkbox to toggle on/offwhether the <a> is clicked or the checkbox itself. I also wantto store the value of the checkbox after it changes.
This sounds simple butI'm having trouble with the event bubbling (as in, I don't understand it).
Here is my current code.
HTML:
View 4 Replies
View Related
Dec 8, 2010
This is using jquery by the way. I have a list of ethnicity on a form for a person to enter that are checkboxes. One option is 'Other, specify'. When 'other specify' is checked, I would like a text box to pop up and disable the other boxes (if you pick other, you can't pick from the previous ethnicities). If 'other, specify' is unchecked, I would like for the text box to disappear and re-enable the checkboxes. I had the appearing box working just using JS. I can't seem to get the syntax right to use the toggle feature of jquery to make the box disappear when unclicked.
JQUERY
<script type="text/javascript">
$(function(){
$('#other').click(function(){
$('#otherrace').toggle(
function(event) {
$(event.target).css('visible');
},
function(event) {
$(event.target).css('hidden');
});});
</script>
HTML
<input type="checkbox" name="race" value="asian" />Asian<br />
<input type="checkbox" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="checkbox" name="race" value="noanswer" />Choose not to answer<br />
<input type="checkbox" name="race" id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
View 3 Replies
View Related
Aug 3, 2011
Have a dialog box (containing two divs):
(1) A <div> tag which contains an individual checkbox labeled as Select All.
(2) A <div> containing a reference to a bunch of check boxes (containing e-mail addresses).
JavaScript code:
How to remove any possible check boxes that are checked and remove them from text field
What happens is that when I click on the Select All check box, it populates my To: text field with all the e-mail addresses.
However, the checkboxes belonging inside emailCheckListId_ul are checked.
How can I set it up so that if I click on Select All, all the checkboxes are populated and when I uncheck on Select All, all the checks are removed from the check boxes and the e-mail addresses are removed from the To: text field?
View 3 Replies
View Related
Jul 12, 2011
Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.
My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.
I have my checkbox created as well as all the effects working for it.
Here is a piece of the main code as well as a link to the ambilight.js file
<label name="ambilightToggle">
<input type="checkbox" name="toggle"/>
<div class="toggle-switch">
<div class="handle"></div>
[Code]....
If the click function works I should be able to have it check the checkboxes state and have it persist.
View 1 Replies
View Related
Dec 18, 2011
I am trying to toggle multiple divs toggle open/closed show/hide with a slide left effect It works but is buggy if you click too fast [URL] I want to create this but control to content in the sliding divs [URL]
View 1 Replies
View Related
May 12, 2010
Trying to get this to work individually with each individual instance on the page (usually 5-10 questions on each page)Right now it adds the class to every instance of the div that has the answerCorrect class. need the link to only turn on the specific answer associated with it.
<script type="text/javascript">
$(document).ready(function(){
$(".showAnswer").click(function(){
[code]....
View 3 Replies
View Related
Dec 29, 2009
I'm looking for a lightweight way to be able to switch between 2 divs on a page.
I have found various ways to do this online with jQuery, but none of which are able to handle multiple switches and make it extendable across the pages of my website efficiently.
For example I could have 12 - 15 individual elements on a page (All with same style) each with an option to switch content e.g. "Click here to do something" then once clicked "it would reveal something" (Within that element/<li> tag) - so it's element specific.
For example:
Code:
<ul>
<li class="box>
Title
[Code]....
But of course as it's element specific you have to associate each id together but you can't have two id="2" - as that won't validate.....
Looking around, a perfect example can be seen at: [URL]
And because it's CMS driven and will have multiple categories/pages, you can't list all the id's with the javascript, so it has to be portable/OOP (Is that the word?) so just a main identifier in the JS...??
Where you click to reveal code and it switches div, but only for that element, it doesn't effect anything else.
View 2 Replies
View Related
Dec 12, 2010
Looking for a simple method to Toggle textbox yes/no using CheckBox
This example does not work!
What I am trying to do:
View 2 Replies
View Related
Sep 8, 2010
i'm looking for something special i guess. cause normaly i'm googling for something i have in mind, put jquery to the search string and voila, but this time i've searched for almost 3 days and give up now.
i am trying to implent a references site. the idea is that you have 1 html site with a list likereference 1reference 2reference 3 ..... with clickable links underneath.
then you have an element centered or somewhere else on the site (e.g. defined as a div area)
now if you click on reference 1, the centerde div should fade in the text, maybe with pictures too. if you click on reference20, the centered div you fade out and the content of reference 20 should fade in an the exact same place.
View 1 Replies
View Related
Sep 15, 2011
First of all, I'm an absolute newb in jQuery. My problem: I have let's say 3 square div's. Beneath these div's are 3 hidden div's, but they are on the same place in the layout. If one of the top div's gets hovered the corresponding bottom div should display, while the rest should hide. And if you move your mouse out of one of those 3 top divs, while not hovering over another, the correspondingbottom div should not change but just stay visible. I searched a while on the internet, but have not yet found anything that fits my needs or for which I have the skills to adjust it.
View 2 Replies
View Related
May 7, 2010
I have 3 checkboxes from which I wish to toggle one div.
condition
1. IF any checkbox is checked, div should show
2. if all checkboxes are unchecked only then the div should hide.
View 1 Replies
View Related
Feb 6, 2010
I have checkbox inputs like so:
<input type="submit" value="One" id="one" />
<input type="submit" value="Two" id="two" />
Say they are both checked.. How would I send those values through the code below properly?
$('#submit').click(function(){
value = $('input:checked'); // not sure how to collect all checkbox values here so they can be sent..
[code]....
View 5 Replies
View Related
Nov 30, 2011
I'm trying to retrieve the respective value from the text boxes. Unfortunate the value i retrieve and added always point to the first text box.
<td align='center'>
<input name='txtQty[]' type='text' id='txtQty[]' size='5' value='$od_qty' class='box'/><br></br>
[code].....
View 1 Replies
View Related
Apr 7, 2011
I have the following checkboxes:
[ ] None [ ] Option 1 [ ] Option 2 [ ] Option 3
When the first checkbox is checked (None), I need the other three checkboxes to:
1. Become unchecked if the user had checked them
2. Become disabled
If/when the first checkbox is unchecked after that, the other three checkboxes would become enabled.
View 4 Replies
View Related
Jul 19, 2010
I'm trying to make a web page that will have an extremely simple minesweeper, where a 2x2 grid is created and only 1 square will have a mine. Upon clicking the squares and no mine is present the square turns green and the square with the mine turns red. I cannot get the squares to stay their respective color once clicked.
[Code]....
View 3 Replies
View Related
Mar 30, 2011
I will have a page with about a 100 or so different links and I would like each one to toggle the visibility of its corresponding hidden div.For instance, if I have a county 'Johnson' when it's clicked I would like the hidden div associated with that county to become visible. I would like to do this without having to write a different function for each one. Is there a way to do this easily?
Below is a solution I was given elsewhere but I couldn't get it to work.Most ideal of all I would like it to work with an image map, with each county having it's own set of stats to be toggled in.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[code].....
View 9 Replies
View Related
Sep 30, 2009
I am using a Toggle function right now that does a getElementByID check. I have a table dynamically being built by ColdFusion that shows a bunch of time entries for a support ticket. Each time entry has 3 rows that I only want to show if the first row is clicked. Right now it only displays the first of the three.
[Code]...
View 1 Replies
View Related
Apr 8, 2011
I am trying to set focus to the first checkbox or text box on the page. Some pages have text boxes at the top, and others have check boxes. The following is the code I am using for the first text box, however it I require the possibility to use checkbox or text.
$(function() {
$("#divId :input[type='text']:first).focus();
});
View 1 Replies
View Related
Oct 24, 2010
On the homepage of my site, I would like to have some nav links that toggle between a few divs that are below in the content The divs in the content should display one at a time. For example, if you click nav1, the user would see div1. If nav2 is then clicked, div1 would hide and div2 would display.
I have some code that will do this, but for some reason it is hiding any divs that are within the toggled div. I'm very basic with JS and could use some help here. Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function toggleID(IDS) {
var area = document.getElementById('secondContent');
var sel = area.getElementsByTagName('div');
[Code]...
View 1 Replies
View Related
Apr 3, 2010
Im trying to toggle a block of info on a forum that gets displayed multiple times. The below works for just one ID but I'll have more then one.
Code:
function toggle() {
var ele = document.getElementById("toggleUserinfo");
var text = document.getElementById("displayUserinfo");
if(ele.style.display == "block") {
[Code]..
View 5 Replies
View Related
Dec 7, 2010
Complete JS first timer here, hope you all can understand my difficulties and stupidities without getting too frustrated. Trying to make a portfolio website as a Christmas gift. Anyway, I'm trying to build a menu that:
1. Expands/Retracts when clicking on other 'headers' in the Menu.
2. Allows for more than one object to be listed in each 'header'.
(Something similar to this [URl]... I've tried to hatch together several online solutions but I really have no idea what I'm doing, as you can see:
[Code]...
View 1 Replies
View Related
May 14, 2009
I am working on a project that shows archived data as well as current data on the same page. When the page builds, current data is shown, archived data is hidden (by using a div with id="archive"). I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?
There should be a link that, when clicked, will grab each element on the page with id="archive" and toggle the display property (none or block).
Here is the current code:
function archives(toggle) {
if (typeof(toggle) != "undefined") {
if (document.getElementById(toggle).style.display == 'none') {
document.getElementById(toggle).style.display = 'block';
[Code].....
This works just fine, but only for the first element that it finds. I need many elements with the same name to be effected.
View 3 Replies
View Related
Jul 29, 2011
someone here might know what I'm doing wrong. I have a list of checkboxes, in multiple rows with each along the lines of:
[Code]...
View 3 Replies
View Related
