Estoy tratando de obtener el valor de un botón de alternancia de la interfaz de usuario de Office Fabric.
https://developer.microsoft.com/en-us/fabric-js/components/toggle/toggle
html:
<div class="ms-Toggle"> <span class="ms-Toggle-description">Let apps use my location</span> <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" /> <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0"> <span class="ms-Label ms-Label--off">Off</span> <span class="ms-Label ms-Label--on">On</span> </label> </div>javascript para inicializar el alternador:
<script type="text/javascript"> var ToggleElements = document.querySelectorAll(".ms-Toggle"); for (var i = 0; i < ToggleElements.length; i++) { new fabric['Toggle'](ToggleElements[i]); } </script> El problema es que no estoy seguro de cómo obtener el valor de On o Off .
Por lo general, usaría document.querySelector('input.demo-toggle-3').textConent pero dado que este no es un campo de texto, aparecía como undefined
¿Alguna sugerencia para obtener el valor Activado o Desactivado del conmutador Fabric ui?
Cuando la palanca está activada, la etiqueta obtiene la clase is-selected .
Podría agarrarlo con algo como #demo-toggle-3 + .is-selected . (El selector toma el elemento adyacente después de un elemento con id= demo-toggle-3 si también tiene la clase is-selected
var ToggleElements = document.querySelectorAll(".ms-Toggle"); for (var i = 0; i < ToggleElements.length; i++) { new fabric['Toggle'](ToggleElements[i]); } function isSelected() { var state = document.querySelector('#demo-toggle-3 + .is-selected') != null; console.log(state); return state; } <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" /> <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" /> <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script> <div class="ms-Toggle"> <span class="ms-Toggle-description">Let apps use my location</span> <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" /> <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0"> <span class="ms-Label ms-Label--off">Off</span> <span class="ms-Label ms-Label--on">On</span> </label> </div> <button onclick="isSelected()">IsSelected?</button>