Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've got a site built from many divs. Nearly all div's have the same class (for CSS) and different id. Here's a part of the code:
<div class="box" id="testbox">
<img src=""><br>
Name<br><input name="choice" value="1" id="name" type="checkbox" onchange="onCheckboxChanged(); checkTotal();">
</div>
When I click anywhere in this div I want to check/uncheck it's checkbox (which is hidden so it can't be clicked) and this will toggle onCheckboxChanged() (unlocks more checkboxes) and checkTotal() (adds values from checked checkboxes). Because of that. clicked div's must first check if a checkbox is enabled and then check/uncheck it. Also I want it to change the background of only this div. I would prefer a solution that uses only html/css/js.
What you need is the label element. Use it instead of your div and it will basically do what you need. You can use the disabled property on the checkboxes to enable/disable them.
document.getElementById("testbox").onclick = function(e){
var nameCheck = document.getElementById("name");
nameCheck.checked = !nameCheck.checked;
nameCheck.onchange();
}
jsfiddle - you could do something like this, though I think using a hidden checkbox instead of an attribute on the div could be superfluous.
$('.box').click(function(){
if($(this).find('input[type=checkbox]').is(':checked'))
{
$(this).find('input[type=checkbox]').removeAttr('checked');
/// do other stuffs
}
else
{
$(this).find('input[type=checkbox]').attr('checked','checked');
/// do other stuffs
}
});
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I have buttons that change color when selected or when "active". Each button holds information to do calculations but when one of the buttons is pressed I need to make a box that holds one of the outputs null. I believe the easiest way to do it would be to place this in my calculations code:
if "button id" is "active"
set value to null
I do not know how to translate that english into javascript.
The ids are what I am giving the CSS ".active" attribute to. Fairly new to the stack overflow thing so if this does not make sense or more information is needed please let me know.
Thanks!
function myfunc(reed) {
if (reed.classList.contains("active")) {
document.getElementById("demon").innerHTML = "Yes I contain .active";
} else {
document.getElementById("demon").innerHTML = "No, sorry not having .active";
}
}
<button class="notactive" onclick="myfunc(this)">Not active</button>
<button class="Iam active" onclick="myfunc(this)">I am active</button>
<span id="demon"></span>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have made a form in which I am asking "Do you make use of this service?".I don't want the remaining questions to appear If the user clicks on the radio button "no". How can I make use of javascript to do this?
Put the rest of your form in a div and then include this js. I'd advise putting it in script tags at the end of the document, otherwise you'll have to wrap it all in window.onload{}.
Also, this will work for checkboxes which makes more sense to me for a yes/no question. I've added a comment for the slight edit you'll need to make it work for radio buttons.
// give the radio button an easy name
var r_b = document.getElementById("radio-button's-id-here");
// and give the div a nice selector
var serv = document.getElementById("the-div's-id");
// listen to when it is clicked
r_b.addEventListener("click",checked,false);
// optional: you originally specified radio buttons which means you'll need to add an event listener for the no option
// lastly include a function to handle everything
function checked (){
// check its status
if (r_b.checked){
// hide the form
serv.style.display = "none";
}else{
serv.style.display = "inline";
}
}
Disclaimer: I'm on my phone, so this is untested and may have typos.
Edit: you don't need to use cookies unless the form is on another page or if you expect users to see this exact page many times without being prompted
Here you go, check this out: http://jsfiddle.net/58urhgen/
<form>
Do you make use of this service?
<input type="radio" name="my-radio" value="Yes" onclick="document.getElementById('service-used').style.display='block';document.getElementById('service-not-used').style.display='none';" /> Yes
<input type="radio" name="my-radio" value="No" onclick="document.getElementById('service-used').style.display='none';document.getElementById('service-not-used').style.display='block';" /> No
<div id="service-used" style="display:none;">
<p>You use the service!</p>
</div>
<div id="service-not-used" style="display:none;">
<p>Doesn't use the service!</p>
</div>
</form>
I've simply used event handlers of the radio buttons to show/hide the respected portions of the form depending on the user's choice. I think this is what you're trying to achieve.
PS: This is not the best practice but this is just to show you how it can be achieved. You can use functions to make your code tidy.
You can use Cookie to store the form status. http://www.w3schools.com/js/js_cookies.asp
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need call this on button's click event.
I want to perform further actions based on selected radio button.
$("#btnExport").click( )
Check this link. You need to use .dialog if yo want radiobuttons in dialog
http://jsfiddle.net/6FGqN/813/
from what i understood.. i guess you need trigger
try this
$('#yourbutton').click(function(){
$('#radioID').val();//will give you the selected radio's value
$("#btnExport").trigger('click');
});
I am showing you a simply alert on both buttons. Please change as ur need
<input type="radio" id="btnExport1">
<input type="radio" id="btnExport2">
$("#btnExport1").click(function(){
alert('First Button');
})
$("#btnExport2").click(function(){
alert('Second Button');
})
Demo: http://jsfiddle.net/kapil_dev/tq3Bm/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
If I wanted to take a button and change it to when clicked to another button using javascript, how would I write this in code?
This is all I have so far but its invalid :/
var change = document.getElementById("fire") === document.getElementById("water");
The HTML:
<button onclick="myFunction()" id="fire">fire</button>
<button id="water" style="visibility:hidden">water</button>
JS:
function myFunction()
{
document.getElementById("fire").style.visibility = 'hidden';
document.getElementById("water").style.visibility = 'visible';
}
you should make two buttons.
Make button A visible initially, button B hidden.
When button A is clicked, hide button A and make button B visible.
This can all be done with CSS. Checkout some jQuery tutorials.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
On my current project i am creating a search function that dynamically updates the content as users select different search criteria. As my title states i want to know whether a user has check or unchecked a particular item so that my JavaScript code can appropriately adjust the content.
Using jQuery i can easily tell if someone has hit the checkbox, but I don't know how to tell whether it is or isn't checked?
example:
<label class="checkbox"><input type="checkbox" id="checkbox1"> Any in Manhattan</label>
User clicks on it and i would like my jquery to do something like:
$( "#checkbox1" ).on( "click", function( event, ui ){
if("#checkbox1" === "clicked"){console.log("check it out!");}
});
You can use is:
$("#myCheckbox").is(":checked")
Which will return true if at least one item in the set is checked. In this case the set would be the (hopefully) singular element with the id myCheckbox.
Use the .checked property of the checkbox object rather than just detecting that it was clicked. As you have pointed out, just a click alone doesn't mean that it is checked because they might have clicked to uncheck it just as likely as they might have clicked to check it.
If you show us the related parts of your code we can tell you precisely how to do this in the context of your program. (For instance, you mentioned that you "can easily tell if someone has hit the checkbox." So if you put that part of your code into your question, we can show you how not only to tell if the checkbox is "hit" but also to tell if it is checked, using either the native .checked property or a jQuery selector.)
Using your code example, we can do this:
$( "#checkbox1" ).on( "change", function( event, ui ){
if(this.checked){console.log("check it out!");}
});
It is better to use change instead of click for various reasons.
Update: there is more discussion here: jQuery checkbox checked state changed event
Update 2:
Working JS Fiddle with the above code snippet: http://jsfiddle.net/cookies/NDjCT/