Semantic UI切换按钮状态获取问题：state与isChecked返回undefined

你的问题出在两个核心点：

1. isChecked是原生<input type="checkbox">的专属属性，而你使用的是<button>类型的toggle按钮，这个属性根本不存在，所以返回undefined。
2. 你手动调用toggleClass('active')切换状态，没有使用Semantic UI Toggle组件的官方API，组件内部的状态不会同步更新，自然也无法通过state属性获取状态。

下面给出两种可行的解决方案：

方案一：使用Semantic UI Toggle组件官方API #

先通过组件API初始化toggle按钮，再用内置方法获取状态：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<button class="ui toggle button" id="tgl">Select All</button>
<script>
// 初始化Toggle组件
$('#tgl').toggle();

// 监听点击事件并获取状态
$('#tgl').on('click', function() {
    const isActive = $(this).toggle('is active');
    alert(isActive);
});
</script>

也可以通过组件的onChange回调直接获取状态：

$('#tgl').toggle({
    onChange: function() {
        const isActive = $(this).toggle('is active');
        alert(isActive);
    }
});

方案二：手动判断active类（若坚持自行控制状态） #

既然你是手动调用toggleClass('active')切换样式，直接用jQuery的hasClass()方法判断元素是否包含active类即可：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<button class="ui toggle button" id="tgl">Select All</button>
<script>
$('#tgl').click(function(){       
    $(this).toggleClass('active');
    const isActive = $(this).hasClass('active');
    alert(isActive);
});
</script>

总结：

• Semantic UI的toggle按钮基于<button>实现，不要用checkbox的属性判断状态。
• 优先使用组件官方API管理状态，可避免样式与状态不同步的问题；若手动操作类，直接通过类名判断状态即可。

内容的提问来源于stack exchange，提问作者Luca