Extremely new at Javascript and have been stuck on an if/else statement, because I don't know how to find the status of the Toggle switch I created.
if ( ? ? ? myToggle == "True" ? ? ? ) {
do this;
} else {
do this;
}
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
</label>
I just want to find the status as to whether or not the toggle has been switched, and then build an if/else statement from there.
Create an EventListener on the checkbox in order to listen for new changes.
Under the EventListener, there'll be an if statement that checks for .checked attribute. If true, it'll print "Checked". If false, it'll print "Not checked".
Example:
var element = document.getElementById("myToggle");
element.addEventListener("change", function (event) {
if (event.target.checked) {
console.log("Checked");
} else {
console.log("Not checked");
}
});
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
</label>
You can use the checked property to return the checked state of a checkbox.
if ( document.getElementById("myToggle").checked === true ) {
// do something
} else {
// do something else
}
Look at this :
https://www.w3schools.com/jsref/prop_checkbox_checked.asp
To get the checked status of input use elem.checked
Take a look at https://www.w3schools.com/jsref/prop_checkbox_checked.asp
if (document.getElementById('myToggle').checked) {
console.log('Toggle is checked')
} else {
console.log('Toggle is not checked')
}
if (document.getElementById('myToggle2').checked) {
console.log('Toggle 2 is checked')
} else {
console.log('Toggle 2 is not checked')
}
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" id="myToggle2" checked>
<span class="slider round"></span>
</label>
Since you are using a checkbox you can access its .checked property in javascript
first select your element
const element = document.querySelector(".input")
Secondly make a function to check the state
function checkState() {
const checked = element.checked;
if (checked) {
// do things here
} else { // do things here }
}
To check the state of the checkbox you can use the checked property
if (document.getElementById("myToggle").checked){
//do something
}else{
//do something else
}
See
https://www.w3schools.com/jsref/prop_checkbox_checked.asp
You can look for the checked attribute using the document interface and handle it with pure JS.
function isChecked(){
var c = document.getElementById('myToggle');
if (c.checked) {
console.log("checked");
} else {
console.log("not checked");
}
}
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
<button onclick="isChecked()">Check and then click here</button>
</label>
Related
I am trying to get the state of this switch for a chrome extension for learning the purpose, below is my sample code to just access the toggle switch onchange event and change the colour of some text.
Code is as follows:
document.addEventListener('DOMContentLoaded', function() {
var togBtn = document.getElementById('togBtn');
togBtn.addEventListener('onchange', function() {
document.getElementById("demo").style.color = "red";
});
});
<label class="switch">
<input type="checkbox" id="togBtn" value="false" name="disableYXLogo">
<span class="slider round"></span>
</label>
How can I get the state of the toggle switch and perform my required task?
Use following:
document.addEventListener('DOMContentLoaded', function() {
var togBtn = document.getElementById('togBtn');
togBtn.addEventListener('change', function() {
onChnage();
});
function onChnage() {
document.getElementById("demo").style.color = togBtn.checked ? "red" : "blue";
}
onChnage();
});
<label class="switch">
<input type="checkbox" id="togBtn" value="false" name="disableYXLogo">
<span class="slider round"></span>
</label>
<div id='demo'>I am the text of demo.</div>
H, I have 4 checkboxes that i need to set values when clicked and unclicked. I have code that works for the first one but struggling to make it work with the other 3?
The code is
<label><input type="checkbox" name="colorCheckbox" value="red"> Return journey required?</label>
<div align="left"> <label><input type="checkbox" name="signs" id="signs"> Non sign written</label></div>
<div align="left"> <label><input type="checkbox" name="disabled" id="disabled"> Disabled access</label></div>
<div align="left"> <label><input type="checkbox" name="female" id="female"> Female driver</label></div>
and the js that works for the first on is :
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
if (this.checked){
document.getElementById("return_required").value = "YES";
}
else {
document.getElementById("return_required").value = "NO";
}
});
});
Because they don't have a value like the first one. They have an id.
You are getting the input value and working on it, so if the input don't has a value, you won't be able to select it.
var inputValue = $(this).attr("value"); // Offending line, because only your first input has a value.
$("." + inputValue).toggle();
The easiest way would be to check the name of the clicked element using this.name and manually match it to the checkboxes, then code the logic for each checkbox. An example is provided below:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
if (this.name == "colorCheckbox")
if (this.checked) {
document.getElementById("return_required").value = "YES";
} else {
document.getElementById("return_required").value = "NO";
}
else if (this.name == "signs") {
console.log("signs"); // replace with logic
} else if (this.name == "disabled") {
console.log("disabled"); // replace with logic
} else if (this.name == "female") {
console.log("female"); // repalce with logic
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="colorCheckbox" value="red"> Return journey required?</label>
<div align="left"> <label><input type="checkbox" name="signs" value="signs"> Non sign written</label></div>
<div align="left"> <label><input type="checkbox" name="disabled" value="disabled"> Disabled access</label></div>
<div align="left"> <label><input type="checkbox" name="female" value="female"> Female driver</label></div>
<br>
<input id="return_required" value="NO"></input>
I am using jquery to display some forms depending on user input. I have a basic info to fill and then the user select radio buttons that will show one distinct form depending on the input (four radio buttons, 2 questions). The problem is that I don't know how to choose it, I want two distint functions for each question.
My Jquery code (just the idea of what I want):
$(document).ready(function () {
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () {
if ($(this).attr("value") == "1") {
$('#first').hide();
$('#second').show();
}
if ($(this).attr("value") == "2") {
$('#first').show();
$('#second').hide();
}
});
$('form[name="THE_FORM"]'.find('p.ISVH').click(function () {
if ($(this).attr("value") == "3") {
$('#third').hide();
$('#fourth').show();
}
if ($(this).attr("value") == "4") {
$('#third').show();
$('#fourth').hide();
}
});
});
HTML:
<div id="main">
<form name="The_FORM">
<p class = "ISVH"> <span> Is Virtual host? </span>
<label for="VH"> Yes <input id="VH" type="radio" name="VH" value="3"> </label>
<label for="NVH"> No <input id="NVH" type="radio" name="VH" value="4"> </label> </p>
<p class = "ISVM"> <span> Is Virtual Machine? </span>
<label for="VM"> Yes <input id="VM" type="radio" name="VM" value="1"> </label>
<label for="PM"> No <input id="PM" type="radio" name="VM" value="2"> </label> </p>
...divs first, second, third, fourth here...
</form>
</div>
I tried:
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
$('form[name="THE_FORM"]: p.ISVM')).click(function () ...
Bit is not working..
What I am doing wrong here? How I write the jquery functions to select the what I want?
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
should be
$('form[name="THE_FORM"]').find('p.ISVM').click(function () ...
while
$('form[name="THE_FORM"]: p.ISVM')).click(function () ...
should be
$('form[name="THE_FORM"] p.ISVM')).click(function () ...
Also, using name attribute is not as efficient as using an ID:
and then one of these would be my preference:
$('#THE_FORM').find('p.ISVM').click(function () ...
$('#THE_FORM p.ISVM').click(function () ...
or even
$('#THE_FORM').on('click', 'p.ISVM', function () ...
which does something else, but that something else is nice.
Even better, I'd probably disregard click and go directly for change event on inputs.
$(input[name*='VH']).change()
{
var vh= $(input[name*='VH']).val();
if (vh == 1 )
{
$('#first').hide();
$('#second').show();
} else if (vh == 2)
{
$('#first').show();
$('#second').hide();
}
}
$(input[name*='VM']).change(){
var vm = $(input[name*='VM']).val();
if (vm == 1 )
{
$('#third').hide();
$('#fourth').show();
} else if (vh == 2)
{
$('#fourth').hide();
$('#third').show();
}
}
How to checked checkbox main when sub checkbox not checked ?
When checkbox id="checkItem1" and id="checkItem2" and id="checkItem3" not checked,
i want to auto checked checkbox id="checkAll" how can i do that ?
http://jsfiddle.net/peap/sydzL8Lc/11/
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
you can do it like bellow
$('input[id^="checkItem"]').change(function(){
if($('input[id^="checkItem"]:checked').length===0)
$('#checkAll').prop('checked',true);
})
DEMO
I did a JSFiddle on the full functionality you will need including including when user click the checkAll all boxes change to checked if checkAll is checked or to not checked otherwise. Also there's a on change listener on each of them to listen if the user check all of them and to change the checkAll to checked and backwards.
HTML:
<input type="checkbox" id="checkAll"> Check All
<hr />
<div class='js-checkboxes'>
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
</div>
Javascript:
$('.js-checkboxes > input').on('change', function() {
var isAllChecked = true;
$('.js-checkboxes > input').each(function() {
if (!this.checked) {
isAllChecked = false;
}
});
if (isAllChecked) {
$('#checkAll')[0].checked = true;
} else {
$('#checkAll')[0].checked = false;
}
});
$('#checkAll').on('change', function() {
if (this.checked) {
$('.js-checkboxes > input').each(function() {
this.checked = true;
});
} else {
$('.js-checkboxes > input').each(function() {
this.checked = false;
});
}
});
$("input[id^='checkItem']").change(function(){
if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked"))
{
$("#checkAll").prop("checked",true)
}
}
EDIT :- DEMO
I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.
HTML
<div id="surv_radio4">
<p>
Merchant Site Property is
</p>
<input type="radio" id="owned" value="owned" name="merchant_property"/>
<label for="owned">Owned</label>
<input type="radio" id="leased" value="leased" name="merchant_property"/>
<label for="leased">Leased</label>
</div>
<div id="surv_5">
<label for="landlord_name" class="test">Landlord Name</label>
<input type="text" id="landlord_name" placeholder="Landlord Name"/>
<label for="landlord_phone">Phone Number</label>
<input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>
CSS
#surv_5 {
display: none;
}
Javascript
<script>
$(document).ready.(function() {
$("input[name$='merchant_property']").click(function() {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else if (value == 'owned') {
$("#surv_5").hide();
}
});
});
</script>
Your document.ready function has a syntax error (extra period):
$(document).ready(function () {
http://jsfiddle.net/isherwood/tW3D5/
Try this:
$("input[name$='merchant_property']").change(function () {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else {
$("#surv_5").hide();
}
});
Fiddle here.
On your original code, you also had an error on your else statement.. See fiddle here
Relevant bits below:
if (value == 'leased') {
$("#surv_5").show();
} else if(value == 'owned'){
$("#surv_5").hide();
}
UPDATE
Too late, looks like #Hiral has an answer for you....