When the toggle switch is selected I want the radio buttons to appear and when it is not I want them to disappear. How do you do this? This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Encoder Counts Per Inch(wheels)</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<form id="fishWeight" action="">
<fieldset>
<legend>Encoder Counts Per Inch(wheels)</legend>
<p>
<label for="length">Diameter of Wheel (in)</label>
<input id="length" name="length" type="number" />
</p><br><br>
<p>
<label for="girth">Distance Traveled</label>
<input id="girth" name="girth" type="number" />
</p><br>
<!-- Rounded switch -->
<p>IME (if not assume quadrature encoder)</p>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label><br><p>Internal Gearing</p>
<form action="">
<input type="radio" name="gender" value="male">Torque<br>
<input type="radio" name="gender" value="female">Speed<br>
<input type="radio" name="gender" value="other">Turbo
</form><br><br><br>
<p>
<input type="submit" value="Calculate Encoder Counts"/>
or
<input type="reset" value="Reset"/>
</p><br><br><br>
<p>
<label for="weight">Encoder Counts</label>
<input id="weight" name="weight" type="number" />
</p>
</fieldset>
</form>
<script>
(function () {
function calculateFishWeight(length, girth) {
length = parseFloat(length);
girth = parseFloat(girth);
return ((girth / (length * 3.1415926)) * 360);
}
var fishWeight = document.getElementById("fishWeight");
if (fishWeight) {
fishWeight.onsubmit = function () {
this.weight.value = calculateFishWeight(this.length.value, this.girth.value);
return false;
};
}
}());
</script>
</body>
</html>
Erik_J
November 2, 2016, 7:01am
2
Hi,
You might be interested in this thread , it’s in the javascript forum but this solution is pure css:
I like a good challenge. This is based off your reset idea.
You’d obviously need a bit more styling to this but it’s a rough demo.
I have to go shower for work otherwise I’d keep styling it to make it more similar.
Perhaps I could add some CSS in there to perhaps check if the “yes” ISN’T checked and then style the “no” accordingly. I’ll play with this when I get to work…
I’m sure there is topics about “CSS function” in this forum too but I couldn’t remember any such named topic.
1 Like
PaulOB
November 2, 2016, 9:47am
3
Hi,
If you change the html then you can use the :checked pseudo class to toggle the display of the radio buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Encoder Counts Per Inch(wheels)</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
#switch {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .switch .slider {
background-color: #2196F3;
}
input:focus + .switch .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .switch .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.show-hide{border:none}
#switch ~ .show-hide{display:none}
#switch:checked ~ .show-hide{display:block}
</style>
</head>
<body>
<form id="fishWeight" action="">
<fieldset>
<legend>Encoder Counts Per Inch(wheels)</legend>
<p>
<label for="length">Diameter of Wheel (in)</label>
<input id="length" name="length" type="number" />
</p>
<p>
<label for="girth">Distance Traveled</label>
<input id="girth" name="girth" type="number" />
</p>
<!-- Rounded switch -->
<p>IME (if not assume quadrature encoder)</p>
<input id="switch" type="checkbox" checked>
<label for="switch" class="switch">
<span class="slider round"></span>
</label>
<fieldset class="show-hide">
<legend>Internal Gearing</legend>
<input type="radio" name="gender" value="male">
Torque<br>
<input type="radio" name="gender" value="female">
Speed<br>
<input type="radio" name="gender" value="other">
Turbo
</fieldset>
<p>
<input type="submit" value="Calculate Encoder Counts"/>
or
<input type="reset" value="Reset"/>
</p>
<p>
<label for="weight">Encoder Counts</label>
<input id="weight" name="weight" type="number" />
</p>
</fieldset>
</form>
<script>
(function () {
function calculateFishWeight(length, girth) {
length = parseFloat(length);
girth = parseFloat(girth);
return ((girth / (length * 3.1415926)) * 360);
}
var fishWeight = document.getElementById("fishWeight");
if (fishWeight) {
fishWeight.onsubmit = function () {
this.weight.value = calculateFishWeight(this.length.value, this.girth.value);
return false;
};
}
}());
</script>
</body>
</html>
The above will hide the visibility of the radio buttons (display:none) but whether that removes them from the submitted form data is probably down to the browser.
Note that you are not allowed to nest forms and using breaks just to make space is frowned upon as that is not their purpose. Use html as it was intended and use the right element for the task in hand. Extra spacing can be created by adding margins or padding to existing elements or for special cases just add a class to the element concerned.
Lastly there are still issues with android and ios when using the checked pseudo class in combination with the adjacent or general sibling combinator. You can find fixes for that here .
In light of the above a simple js hide and show may seem appropriate but as you are already styling elements using the :checked pseudo class then I guess you may have to stay with what you have and use the fixes I linked to.
2 Likes
I added another radio button and made the check box not automatically check. Is there a way to run math functions and return the value based on which radio button is pressed? Basicly I want it to do what it does now if no button is pressed or if the other(quadrature encoder) button is pressed. If the torque, speed, or turbo buttons are pressed I want it to do different math. Thanks for the help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Encoder Counts Per Inch(wheels)</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
#switch {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .switch .slider {
background-color: #2196F3;
}
input:focus + .switch .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .switch .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.show-hide{border:none}
#switch ~ .show-hide{display:none}
#switch:checked ~ .show-hide{display:block}
</style>
</head>
<body>
<form id="fishWeight" action="">
<fieldset>
<legend>Encoder Counts Per Inch(wheels)</legend>
<p>
<label for="length">Diameter of Wheel (in)</label>
<input id="length" name="length" type="number" />
</p>
<p>
<label for="girth">Distance Traveled</label>
<input id="girth" name="girth" type="number" />
</p>
<!-- Rounded switch -->
<p>IME (if not assume quadrature encoder)</p>
<input id="switch" type="checkbox">
<label for="switch" class="switch">
<span class="slider round"></span>
</label>
<fieldset class="show-hide">
<legend>Internal Gearing</legend>
<input type="radio" name="gender" value="torque">
Torque<br>
<input type="radio" name="gender" value="speed">
Speed<br>
<input type="radio" name="gender" value="turbo">
Turbo<br>
<input type="radio" name="gender" value="other(quadrature encoder)">
other(quadrature encoder)
</fieldset>
<p>
<input type="submit" value="Calculate Encoder Counts"/>
or
<input type="reset" value="Reset"/>
</p>
<p>
<label for="weight">Encoder Counts</label>
<input id="weight" name="weight" type="number" />
</p>
</fieldset>
</form>
<script>
(function () {
function calculateFishWeight(length, girth) {
length = parseFloat(length);
girth = parseFloat(girth);
return ((girth / (length * 3.1415926)) * 360);
}
var fishWeight = document.getElementById("fishWeight");
if (fishWeight) {
fishWeight.onsubmit = function () {
this.weight.value = calculateFishWeight(this.length.value, this.girth.value);
return false;
};
}
}());
</script>
</body>
</html>
PaulOB
November 2, 2016, 4:59pm
5
You will need one of the JS experts to help you with running your script when some element is clicked. I can move this thread to the JS forum unless I misunderstood what you wanted?
Sure, if the javascript thread is better then you can move it.
Thanks!
system
February 2, 2017, 4:09am
10
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
