i have tried this:
function stickyheaddsadaer() {
$("#page-header-inner").addClass("sticky");
}
<input type="checkbox" name="TT_sticky_header" id="TT_sticky_header_function"
value="{TT_sticky_header}" onclick="stickyheaddsadaer()"/>
so when i click checkbox, it just nothing happens....
but when i try this:
function stickyheaddsadaer() {
alert("I am an alert box!");
}
then works...
can you please help me ? I need to activate javasript function by checkbox
and when the js function is actived it add class to the div
Thank you
Better to use onchange event and check inside function if checked or not
function stickyheaddsadaer(obj) {
if($(obj).is(":checked")){
alert("Yes checked"); //when checked
$("#page-header-inner").addClass("sticky");
}else{
alert("Not checked"); //when not checked
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="TT_sticky_header" id="TT_sticky_header_function" value="{TT_sticky_header}" onchange="stickyheaddsadaer(this)"/>
HTML
<input type="checkbox" id="switch" onclick="change()">
JS
function change() {
var decider = document.getElementById('switch');
if(decider.checked){
alert('check');
} else {
alert('unchecked');
}
}
function checkFluency(){
var checkbox = document.getElementById('fluency');
if (checkbox.checked != false) {
alert("Checkbox checked")
}else{
alert("Not Checked")
}
}
<input type="checkbox" onclick="checkFluency()" id="fluency" />
Related
So, my goal is this: if the checkbox is checked by the user, do something (let's say just an alert). Here's my code, that is not working:
function validate() {
if (document.getElementById('LetterNeed').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
<input type="checkbox" name="LetterNeed" id="LetterNeed">Not important</span>
Thanks for your help!
Call the validate function on change of the checkbox state.
<input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span>
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
OR
document.getElementById('LetterNeed').addEventListener('change', validate);
DEMO
Old Approach
Call the validate() function in the <input> tag
function validate() {
if (document.getElementById('LetterNeed').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
<input type="checkbox" name="LetterNeed" id="LetterNeed" onclick="validate()">Not important</span>
Event Handling approach
function validate() {
if (this.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
document.getElementById('LetterNeed').addEventListener('click', validate);
<input type="checkbox" name="LetterNeed" id="LetterNeed"><span>Not important</span>
on the other hand you can add eventlistener on DOMContentLoaded as below:
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#LetterNeed').addEventListener('change', validate);
});
A function to validate
function validate(e){
if(e.target.checked)
{
alert("Checked");
}
else{
alert("Not checked");
}
}
try these changes :
function validate(aCheckBox) {
if (aCheckBox.checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
<input type="checkbox" name="LetterNeed" id="LetterNeed" onclick="validate(this)">Not important</input>
I want to enable button only if checkbox is on. What I am doing wrong here ? Thanks in advance..
index.html
<p><input id="agree" type="checkbox" /> I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
custom.js
$( document ).ready(function () {
$('#agree').change(function () {
var state = $(this).attr('value');
if (state == 'on') {
$('#continue').removeAttr('disabled')
} else if (state == '') {
$('#continue').attr('disabled','disabled');
}
});
});
You could simplify it to the following:
Example Here
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input id="agree" type="checkbox" />I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
The reason your code wasn't working was because you were using .attr(). Since there is no value attribute, you needed to use .prop(). This still wouldn't work though because the value will always return on. You need to get the checked property accessing this.checked or .prop('checked') - working example using your original snippet.
$('#agree').on('change', function () {
if (this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled', 'disabled');
}
});
Try this:
$( document ).ready(function() {
$('#agree').change(function() {
if(this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled','disabled');
}
});
});
If you want to check if input has checked :
state = $(this).prop( "checked" );
this returns boolean value (true if checked or false if unchecked).
I want to do is to store the current inputs even if the user refresh or close the browser.
My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.
testing link: http://jsfiddle.net/5kcsn/124/
current script:
$(document).ready(function () {
$('#employed_v1, #employed_v0, #test').on("change", function () {
debugger;
localStorage.setItem($(this).attr("id"), $(this).val())
});
$('#employed_v1, #employed_v0, #test').each(function (ind, val) {
debugger;
if ($(val).attr("id") != "employed_v1") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
if ($(val).attr("id") != "employed_v0") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
else {
if (localStorage.getItem($(val).attr("id")) == "Yes"){
$("#employed_v1[value=Yes]").prop("checked", true);}
if (localStorage.getItem($(val).attr("id")) == "No"){
$("#employed_v0[value=No]").prop("checked", true);}
}
});
$('[id="employed_v0"]').on('click', function(){
$('#test').val('');
$('#test').prop('disabled', true);
});
$('[id="employed_v1"]').on('click', function(){
$('#test').prop('disabled', false);
});
});
To store the check state you should use the checked attribute.
However, here is a modified version :
$(document).ready(function () {
$('#employed_v1, #employed_v0').on("change", function () {
localStorage.setItem('employed', $(this).attr("id"))
});
$('#' + localStorage.getItem('employed')).attr('checked', true);
});
There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:
Html:
<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.js-store').on("change", function () {
if ($(this).is(":radio")) {
localStorage.setItem($(this).attr("name"), $(this).val());
}
else {
localStorage.setItem($(this).attr("id"), $(this).val());
}
});
$(".js-store").each(function() {
if ($(this).is(":radio")) {
var value = localStorage.getItem($(this).attr("name"));
if (value) { $(this).prop("checked", value === $(this).val()); };
}
else {
var value = localStorage.getItem($(this).attr("id"));
if (value) {$(this).val(value);}
}
});
});
</script>
I was trying to change the value of an variable according to the status of an checkbox
here is my code sample
<script type="text/javascript">
if(document.getElementByType('checkbox').checked)
{
var a="checked";}
else{
var a="not checked";}
document.getElementById('result').innerHTML ='result '+a;
</script>
<input type="checkbox" value="1"/>Checkbox<br/>
<br/>
<span id="result"></span>
Can you please tell me whats the problem with this code.
Try this:
if (document.querySelector('input[type=checkbox]').checked) {
Demo here
Code suggestion:
<input type="checkbox" />Checkbox<br/>
<span id="result"></span>
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
var a = input.checked ? "checked" : "not checked";
document.getElementById('result').innerHTML = 'result ' + a;
}
input.onchange = check;
check();
}
</script>
In your post you have the javascript before the HTML, in this case the HTML should be first so the javascript can "find it". OR use, like in my example a window.onload function, to run the code after the page loaded.
$('#myForm').on('change', 'input[type=checkbox]', function() {
this.checked ? this.value = 'apple' : this.value = 'pineapple';
});
try something like this
<script type="text/javascript">
function update_value(chk_bx){
if(chk_bx.checked)
{
var a="checked";}
else{
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
</script>
<input type="checkbox" value="1" onchange="update_value(this);"/>Checkbox<br/>
<span id="result"></span>
Too complicated. Inline code makes it cool.
<input type="checkbox" onclick="yourBooleanVariable=!yourBooleanVariable;">
For those who tried the previous options and still have a problem for any reason, you may go this way using the .prop() jquery function:
$(document.body).on('change','input[type=checkbox]',function(){
if ($(this).prop('checked') == 1){
alert('checked');
}else{
alert('unchecked');
}
This code will run only once and check initial checkbox state. You have to add event listener for onchange event.
window.onload = function() {
document.getElementByType('checkbox').onchange = function() {
if(document.getElementByType('checkbox').checked) {
var a="checked";
} else {
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
}
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
The javascript:
$(document).ready(function() {
function toggletr(obj)
{
if(obj.checked)
$(#tr99).hide();
else
$(#tr99).show();
}
hi.this is my code that runs in add page of staff.
if user is in edit mode the value that value is checked in the code
i mean to say in .cs .
checkbox.checked ="true" means . that time i need to make that tr value "tr99" is visiable true
if checkbox is not checked then make the tr as hide.
Take the toggletr method out of the "$(document).ready(function() {"
<script type="text/javascript">
function toggletr(obj){
if(obj.checked)
$('#tr99').hide();
else
$('#tr99').show();}
</script>
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
I think that you want this to happen
$(document).ready(function() {
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
});
Is that it? You can also add the function directly
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
If I were you I'd set the onclick method to be an event handler:
$(function(){
$('#cbox').click(function(){
if(this.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
});
});
If you wanted to do pure jQuery and not mix in normal Javascript (obj.checked)....
$(function(){
$("#cbox").click(function(){
if($(this).is(":checked")){
$("#tr99").show();
}else{
$("#tr99").hide();
}
});
});