Pages

▼

2016/12/06

How to get input from check boxes and toggle switches

This post is about how to get the input value from check boxes and toggle switches.

Getting the input from check boxes



Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>Get Check Box Value</title>
</head>
<body>
 <input type="checkbox" class="checks" value="Apple"> A____<br>
 <input type="checkbox" class="checks" value="Banana"> B_____<br>
 <input type="checkbox" class="checks" value="Carrot"> C_____<br>
 <br><br>
 <a href="#" onclick="getValue();return false;">Get Value</a>
 
<script>
 function getValue() {
    
  var checks = document.getElementsByClassName('checks');
  var str = '';
   
  for ( i = 0; i < 3; i++) {
     
   if ( checks[i].checked === true ) {
    str += checks[i].value + " ";
   }
    
  }

   if (str == '') {
    str = "No checked box";
   }

   alert(str);
  }
      
</script>
</body>
</html>
Source: http://codingwithsara.com/how-to-get-the-values-of-checked-checkboxes-in-javascript/

Result



--------------------------------------------------------------------------------------------------------------------------

Getting the input from toggle switches

Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<script>

 function getValue() {
  var result = document.getElementsByClassName("toggle");
  var str = "";
  
  for (i = 0; i < 4; i++) {
   if (result[i].checked == true) {
    str = str + "1 ";
   } else {
    str = str + "0 ";
   }  
  }
  console.log(str);
 }

</script>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.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: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  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(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox" class="toggle">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" class="toggle" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox" class="toggle">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" class="toggle" checked>
  <div class="slider round"></div>
</label>

<br><br>
<a href="#" onclick="getValue(); return false;">Get Value</a>

</body>
</html>

Result

References:

How TO - Toggle Switch
http://www.w3schools.com/howto/howto_css_switch.asp

How to get selected value from a Flip Switch or Toggle Switch
http://stackoverflow.com/questions/28451621/how-to-get-selected-value-from-a-flip-switch-or-toggle-switch

CSS Toggle Switch Examples
http://callmenick.com/post/css-toggle-switch-examples

How to get the values of checked checkboxes in JavaScript
https://www.youtube.com/watch?v=B1X5oMUxEeI
at

No comments:

Post a Comment