|
JavaScript - Adding & Removing A Div Class When A Checkbox Is Clicked/unclicked
Hi guys. I have a lot of information on my site that is in multiple categories. I have a list of categories, each with its own checkbox. By default, all the information is displayed (therefore all the checkbox's are checked by default).
When someone unchecks the box I want to hide the divs with that class, and when someone rechecks the box, they should reappear. Here is my code so far. It is hiding the div's fine, but they are not reappearing when user tics the checkbox again. Code: <script type="text/javascript">
function toggledisplay(category){
if(document.getElementById(category).checked){
$("."+category).removeClass(category+"-hidden").addClass(category);
}
else{
$("."+category).addClass(category+"-hidden").removeClass(category);
}
}
</script>
<input type="checkbox" checked="checked" name="fitness" id="fitness" onclick="toggledisplay('fitness')" />
Similar TutorialsI am using a lightbox script (which dims the page when clicked and shows a pop up image). This script is called upon by the user clicking on an imageButton. I am also trying to close, hide or disable this once it has been clicked on (so it only works once). My code is below: < a href="lightbox/images/image-1.jpg" name="alightbox" rel="lightbox" > < asp:ImageButton ID="ImgBtnWarning" src="lightbox/images/submitCover.gif" runat="server" border="0" onClick="ImgBtnWarning_Click" style="position: relative; top:10px; left: 75px; z-index: 1; display: none;" / > < / a> The problem is, when I wrap the < a > tags around my imageButton - the image button code doesn't work (and so fails to activate the onClick event - where I disable this once it has run). I am probably doing this wrong, but I don't know of another way to get the lightbox to only work once or to disable the ImgBtnWarning from the lightbox.js file. FURTHER INFO: Lightbox example he http://www.javascriptkit.com/script/...ox/index.shtml I have tried a JavaScript piece of code to disable the btn once clicked, but this also needs to use href - and I am already using href to open the lightbox image. Can a checkbox do 2 different things after it is clicked? Right now I am using this... Code: <input type="checkbox" onclick="processCheckbox(this);"> <input type="checkbox" onclick="activLink(this.checked)"> I don't want to have 2 checkboxes on my page, just 1 and get the same result. Is this possible? Chad Hey all, I would like to get the id of a html check box when the client clicks it. I want to do this on the client side so i need to use java script. I want to be able to do this in both fire fox and ie window.event.srcElement works great for ie but not for firefox please do not tell me to use Event.target for firefox because that does not work. At least it is not working for me anyway. Thanks Hi, may I ask how do you display a line or a sentence when you click the checkbox? Hi, I currently have a script that dynamically adds a css class called "on" to a menu item once it is selected, turning that link red to show that it's active. Here is the web page: www.talmagecooley.com/films.html As you can see, if you click on "Dimmer" or "Pol Pot's Birthday", or one of the three Patriotville scene links (1, 2, or 3), those links stay red. But what I need to happen is that when the user hovers over OR clicks on "1", "2", or "3", the word "Patriotville" also turns red along with those links. Here is the current code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='on'; Lst=obj; } /*]]>*/ </script> <li class="rss-popup" id="patriotville"><a id="three" href="#" onclick="" class="feed-link" style="color:#fff;">PATRIOTVILLE</a></li> <div id="clips"> <li class="rss-popup"><a id="four" href="#" onclick="changeIt('film3_1');CngClass(this);">1</a></li> <li class="rss-popup"><a id="five" href="#" onclick="changeIt('film3_2');CngClass(this);">2</a>|</li> <li class="rss-popup"><a id="six" href="#" onclick="changeIt('film3_3');CngClass(this);">3</a></li> </div> ********** Any help would be greatly appreciated! Thanks!! Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
</script>
HTML: Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
Hi. I'm trying to get my script below working. I've managed to get it to add fields dynamically but the remove function isn't right... and I can't think of a way round it. any ideas? also.. how can i incorporate a way for a limit on the number of fields that can be added? cheers! any help would be very appreciated. Code: <script type="text/javascript">
function addInput()
{
var x = document.getElementById("inputs");
x.innerHTML += "<input type=\"text\" />";
}
function removeInput()
{
var x = document.getElementById("inputs");
x.innerHTML -= "<input type=\"text\" />";
}
</script>
<input type="button" value="add field" onclick="addInput();" />
<input type="button" value="remove field" onclick="removeInput();" />
<div id="inputs"></div>
.. update: ah, i've just looked into the operators in more details and -= is just for numbers... so this won't work. i presume this is going to be the wrong method then. Hi everyone. I am unfortunately stuck, and must admit myself defeated by my inferior javascript knowledge. I would really love some sort of javascript observer to automatically add/remove a class to the labels on my page, depending on wether their checkboxes are checked or not. As well as adding those same CSS-classes to the checkboxes already checked on document load. This would be possible in javascript, wouldn't it? Hi, i feel kinda stupid asking this, but im kinda lost. I want to add up multiple values of groups of checkboxes. I managed to add up the values, but making it so that only one checkbox per group can be enabled at any time gives me a headache. Here is what i got so far, any hints to how to make it work would be really cool. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
function Summe()
{
sum = 0;
if(document.Formular.m1.checked)
{
sum = sum + (1 * document.Formular.m1.value);
}
if(document.Formular.m2.checked)
{
sum = sum + (1 * document.Formular.m2.value);
}
if(document.Formular.m3.checked)
{
sum = sum + (1 * document.Formular.m3.value);
}
if(document.Formular.m4.checked)
{
sum = sum + (1 * document.Formular.m4.value);
}
if(document.Formular.m5.checked)
{
sum = sum + (1 * document.Formular.m5.value);
}
if(document.Formular.m6.checked)
{
sum = sum + (1 * document.Formular.m6.value);
}
if(document.Formular.m7.checked)
{
sum = sum + (1 * document.Formular.m7.value);
}
if(document.Formular.m8.checked)
{
sum = sum + (1 * document.Formular.m8.value);
}
document.Formular.black.value = sum;
}
</script>
<form name="Formular">
<INPUT TYPE="TEXTBOX" NAME="black" VALUE="" SIZE="3"> <br>
grp1<br>
<input type="checkbox" Name="m1" Value="411" id="411" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m2" Value="412" id="412" onClick="javascript:Summe()"> <br><br>
grp2<br>
<input type="checkbox" Name="m3" Value="421" id="421"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m4" Value="422" id="422"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m5" Value="423" id="423" onClick="javascript:Summe()"> <br> <br>
grp3 <br>
<input type="checkbox" Name="m6" Value="431" id="431" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m7" Value="432" id="432" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m8" Value="433" id="433" onClick="javascript:Summe()"> <br> <br>
</form>
</body>
</html>
<script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave So here's what i want to do: i have 2 checkboxes, when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B how can i do that? thanks a lot ! Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() {
this.elements = new Array;
}
function derivedClass() {
}
derivedClass.prototype = new baseClass;
Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass();
a.elements.push("A");
a.elements.push("B");
b = new derivedClass();
b.elements.push("C");
b.elements.push("D");
When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass();
a.elements.push("A");
a.elements.push("B");
b = new baseClass();
b.elements.push("C");
b.elements.push("D");
then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos Hi, If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript. Thanks, Cs1h Hey, I'm not to good at javascript and need help. When someone clicks an option in a <select> box, I want a field to appear with a normal text box. For example: Code: <!--Option box--> <select name="method"> <option>Post 2 Host</option> <option>Paid</option> <!--I want it when they click Paid, a box shows up below. Such as--> <input type="text" name="paid" /> Can you show me how I can do this? Thanks. Hey, I'm new to javascript and was wondering if there is something where you can tell if something is clicked. All I need is to know something where you click something and it appears, and click again it disappears. How can I do this? Thanks! Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked? For example: https://www.facebook.com/help/?page=1145 Facebook has something like that available. Any ideas? On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.
I have a simple problem that I can't solve. I know that you guys might know how to solve it. I'm using an extension of dreamweaver called Coursebuilder. I'm making an online-examination to improve education especially in a far region of Asia where there's poor quality of education in there. Now, I'm making a multiplication choice type of exam with radio buttons in it and when the "check answer" was clicked, the answer will be explained. It is already done, but the problem is the feedback score. I can't make a feedback score... example the examination is 40/100 score it must appear on the screen at once after a click of a certain button. That's my only problem for now. It will be used in CD format and online. what should i do? All I need is to know how will I put a button that once it was clicked the score in the examination will appear. I'm an amateur web designer, I need your help. Thanks please help me. Hi, I am currently working on a website with a custom livesearch. The livesearch is a simple <ul> under the input box. I am trying to make it so that if the user click anywhere other than the input box(id=searchInput) or the list(id=searchResults). I tried an onblur on the input box, but when the user clicks on the list it vanishes, which defeats the object! Any help would be much appreciated |
|||||||