I am trying to get the value of a toggle button from the office fabric ui.
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 to initialize the toggler:
<script type="text/javascript">
var ToggleElements = document.querySelectorAll(".ms-Toggle");
for (var i = 0; i < ToggleElements.length; i++) {
new fabric['Toggle'](ToggleElements[i]);
}
</script>
The problem is I am not sure how to get the value of On or Off.
I usually would use document.querySelector('input.demo-toggle-3').textConent but since this isn't a textfield it was coming up as undefined
Any suggestions to get the On or Off value of the Fabric ui toggler?
When the toggle is on, the label gets the is-selected class.
You could grab it with something like #demo-toggle-3 + .is-selected.
(The selector takes the adjacent element after and element with id=demo-toggle-3 if it also has the class 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>