Wie man den Wert von toggle-Taste ja/Nein Und zeigen Sie Daten abrufen, Schaltfläche aktiv

Hiii An Alle,

Unten ist mein code, um die Anzeige umzuschalten Taste ja/Nein.Was ich tun möchte, ist, basierend auf der Auswahl des Benutzers möchte ich, um Daten abzurufen.Wenn Sie ja wählen toggle-button javascript-variable sollte ja string oder sonst keine Zeichenfolge.

HTML-Code

<label class="switch">
  <input class="switch-input" type="checkbox" />
  <span class="switch-label" data-on="Yes" data-off="No"></span> 
  <span class="switch-handle"></span> 
 </label>

CSS

  .switch {
  position: relative;
  display: block;
  vertical-align: top;
  width: 100px;
  height: 30px;
  padding: 3px;
  margin: 0 10px 10px 0;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
  border-radius: 18px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
}
.switch-label:before {
  content: attr(data-off);
  right: 11px;
  color: #aaaaaa;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
  content: attr(data-on);
  left: 11px;
  color: #FFFFFF;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.switch-input:checked ~ .switch-label {
  background: #0088cc;
  border-color: #0088cc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}
.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
  background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
  border-radius: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
  left: 74px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

Ich refreed diesen code aus http://www.htmllion.com/css3-toggle-switch-button.html

Unten ist der Ausgang

Wie man den Wert von toggle-Taste ja/Nein Und zeigen Sie Daten abrufen, Schaltfläche aktiv

Habe ich versucht, dieses jquery zu bekommen:

 alert($(this).attr("data-on"));

Ich weiß nicht, wie man ausgewählte Schaltfläche Daten-und ebenso nach der die Daten so speichert er in der Datenbank und die möchte ich abrufen, aus der Datenbank entweder ja oder Nein, es sollte ausgewählt werden, als Standard abrufen aus der Datenbank.Wie kann ich das tun.Ergebnis welche ich versucht habe in jquery ist die Rückgabe undefiniert Werte.Bitte mir jemand helfen um aus diesem problem.Vielen Dank im Voraus.

Wenn Sie mehr wollen - mehr code, haben Sie tryed
Ich habe versucht, in jquery-ähnlich wie oben-code..anstatt zu Daten-ich habe versucht, mit span id und Daten-id und Daten-aus usw..,
bitte, wright Ihre Aufgabe. von Anfang bis Ende.

InformationsquelleAutor Kavya Shree | 2016-05-18

4

Versuchen Sie dies:
```
(function() {
  $(document).ready(function() {
    $('.switch-input').on('change', function() {
      var isChecked = $(this).is(':checked');
      var selectedData;
      var $switchLabel = $('.switch-label');
      console.log('isChecked: ' + isChecked); 

      if(isChecked) {
        selectedData = $switchLabel.attr('data-on');
      } else {
        selectedData = $switchLabel.attr('data-off');
      }

      console.log('Selected data: ' + selectedData);

    });
  });

})();
```
Für Ref: http://jsbin.com/zizuxo/edit?js,console,output
- Ya seine Arbeit..Und ich möchte wissen, wie kann ich gespeicherte Daten aus der Datenbank, die in-Taste, zum Beispiel, wenn ich speichern Sie es als ja in der db und ich wan um zu zeigen, button, default-Auswahl als ja
- Versuchen Sie dies: // Params ($selector, boolean) function setSwitchState(el, flag) { el.attr('checked', flag); } // Usage setSwitchState($('.switch-input'), true); > Ref: jsbin.com/zizuxo/edit?js,console,output @KavyaShree
- Ich möchte überprüfen Sie die Datenbank-Ergebnis und stellen Sie entweder ja /Nein, wie kann ich dies tun
InformationsquelleAutor Surender Lohia

in reinem JS :

var result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no'

jQuery im Kompatibilitätsmodus :

var result = jQuery('.switch-input').is(':checked')?'yes':'no';

bitte sagen Sie mir, was Sie haben in der Konsole : jQuery.fn.jquery

InformationsquelleAutor xAqweRx

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.