How can I check if the switch is on or off

HTML & CSS
1

So I’ve been googling for an answer for about 8 hours trying all sorts of code, nothing seems to work. I’ve tried making a variable for the switch, checking if the switch is clicked. Nothing seems to work! I got the switch from here https://www.w3schools.com/howto/howto_css_switch.asp
I don’t have any code to give you.
P.S. I’m new to this

2

I notice you tagged the topic with PHP so there is probably more to this.
But to help you we need to know what it is exactly you are intending to do, it’s not clear from the question what you expect the switch to do…

3

The switch is supposed to be connected to a database. Database is used to check the status of the switch (like remotely turning on and off sprinklers, if that makes sense). By checking if it’s on or off i can, as a first step, print “status: 1” or “status: 0”.

4

check if the switch is on or off

In the example you linked to, CSS selectors are used to style the element, but it’s not really “checking” to see if it’s checked or not.

You can use JavaScript hasAttribute()
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/checkbox

checked

Type: boolean

Indicates whether the element is checked or not.

Use hasAttribute() to determine whether this attribute is set instead of getAttribute() .

For buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.

You would then need to pass that information to the server-side PHP some how. JavaScript could be used if you want to use AJAX. If you want to have a form submit “checked” should get sent in the POST array headers without needing JavaScript.

1 Like
5

Okay so the switch as You saw is the type checkbox, in theory I can go about it with

<script>
      if(('.switch').checked){
        System.out.Println="status: 1";
      else {
        System.out.Println="status: 0";
              }
      }

      </script>

or not ?

6

That sort of looks like a mix of jQuery and Java?

If there can be more than one element with the class “switch” the code will need to deal with that, otherwise giving the element a unique id would probably be better. AFAIK, using $('#switch').prop('checked') is the preferred over $('#switch').checked but I don’t know why.

Instead of System.out.Println I would console.log() instead. eg.

<script>
      if( $('.switch').prop('checked') ) {
        console.log("status: 1");
      } else {
        console.log("status: 0");
      }
</script>
1 Like
7

I’ve implemented it in my code, only displays Status: 0 . At least it’s a start, thanks! :smiley:

8

Hi there krsticmilos1974,

check out this code which creates checkbox and radio simulations…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

form {
    display: inline-block;
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
         0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

fieldset {
    border: 0;
 }

legend {
    font-weight: bold;
 }

.cb, .rd {
    position: relative;
    display: block;
    width: 2.5em;
    height: 1.5em;
    border: 1px solid #999;
    margin: 0.25em;
    background-color: #ccc;
    transition: 0.5s ease-in-out;
 }

.rd {
    border-radius: 0.75em;
 }

.cb::before, .rd::before {
    position:absolute;
    top: 0.25em;
    left: 0.25em;
    width: 1em;
    height: 1em;
    line-height: 0.75em;
    font-size: 1em;
    font-weight: bold;
    content: '\02713';
    text-align: center; 
    color: transparent;
    background-color: #fff;
    transition: 0.5s ease-in-out;
 }

.rd::before {
    top: 0.125em; 
    left: 0.125em;
    width: 0.5em;
    height: 0.5em;
    line-height: 0.3em;
    border-radius: 0.5em;
    font-size: 2em;
    font-weight: normal;
    content: '\02022';
 }

input[type="checkbox"]:checked + .cb,
input[type="radio"]:checked + .rd   {
    background-color: #2196f3;
 }

input[type="checkbox"]:checked + .cb::before, 
input[type="radio"]:checked + .rd::before  {
    transform: translateX( 1em );
    color: #2196f3;
 }

input[type="radio"]:checked + .rd::before  {
    transform: translateX( 0.5em );
 }
</style>

</head>
<body> 

<form action="#">
 <fieldset>
  <legend> checkoxes</legend>
   <input type="checkbox" id="cb1" name="cb1" value="checkbox 1" hidden>
   <label for="cb1" class="cb"></label>

   <input type="checkbox" id="cb2" name="cb2" value="checkbox 2" hidden>
   <label for="cb2" class="cb"></label>

   <input type="checkbox" id="cb3" name="cb3" value="checkbox 3" hidden>
   <label for="cb3" class="cb"></label>
 </fieldset>
 <fieldset>
  <legend>radio buttons</legend>
   <input type="radio" id="rd1" name="r" value="radio 1" hidden>
   <label for="rd1" class="rd"></label>

   <input type="radio" id="rd2" name="r" value="radio 2" hidden>
   <label for="rd2" class="rd"></label>

   <input type="radio" id="rd3" name="r" value="radio 3" hidden>
   <label for="rd3" class="rd"></label>
 </fieldset>
 <input type="submit">
</form>

</body>
</html>

coothead

9

I’m guessing that’s because the input is not checked upon page load when the script runs. eg. if the source HTML is

<input type="checkbox" class="switch" checked >

vs.

<input type="checkbox" class="switch" >

Assuming the intention is not to have the input checked by default to start with, you can assign an event listener to the input. There are a lot of events, what I would use in this case is the change event.

Sticking with jQuery
https://api.jquery.com/category/events/
I would use “on”
https://api.jquery.com/on/
Using the first example as a starting point

$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

first change it to

$( ".switch" ).on( "change", function() {
  console.log( $( this ).prop('checked) );
});

* “this” in this context refers to “the selected element”

As is, console log should now display either true or false every time the input changes. If you wanted to, you can put the “ifs” inside the function as

...
if ( $( this ).prop('checked) ) { 
  console.log("status: 1"); 
} else { 
...
10

I tried it but I don’t really know jQuery so i tried doing it with js event. Ditch the switch and put a button instead.

let switchStatus = false;
let switch3 = document.querySelector(".button");

console.log("status: 0");

function switchToggle(){
  if (switchStatus == false) {
    console.log("status: 1");
    switchStatus = true;

      }
  else {
      console.log("status: 0");
      switchStatus = false;

    }
  }

switch3.onclick = switchToggle;
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.