Question

我有Bootstrap v3.3并且我将以下checkbox es设为按钮：

        <div class="btn-group transactionSheetToolbarStatusToggle" data-toggle="buttons">
            <label class="transactionSheetToolbarShowDraft btn btn-default active">
                <input type="checkbox" autocomplete="off" checked="checked">Draft
            </label>
            <label class="transactionSheetToolbarShowFinalised btn btn-default active">
                <input type="checkbox" autocomplete="off" checked="checked">Finalised
            </label>
            <label class="transactionSheetToolbarShowVoid btn btn-default">
                <input type="checkbox" autocomplete="off">Voided
            </label>
        </div>

使用jQuery，我似乎在获取复选框事件时遇到了问题。

我试过了：

$('.transactionSheetToolbarShowDraft input[type="checkbox"]').change(function() {...});

但似乎事件没有被触发。

我也尝试过：

$('.transactionSheetToolbarShowDraft input[type="checkbox"]').click(function() {...});

但是，似乎事件似乎没有被触发。然后我有这个：

$('.transactionSheetToolbarShowDraft').click(function() {...});

事件被触发，但似乎出现了问题...... 当我尝试获取:checked的{{1}}状态时，会出现此问题。

checkbox

$('.transactionSheetToolbarShowDraft').click(function() { var checkbox = $(this).find('input[type="checkbox"]'); if (checkbox.is(':checked')) { console.log('is checked!'); } else { console.log('not checked...'); } });状态似乎正好相反！我做了一些调试并追查了问题。这背后的原因是，点击:checked并触发了label事件，click尚未更新。基本上checkbox事件处理程序在change更新其检查状态之前被调用。绝望之后，我想出了以下黑客：

checkbox

这似乎有效...除了使用$('.transactionSheetToolbarShowDraft').click(function() { var checkbox = $(this).find('input[type="checkbox"]'); setTimeout(function() { if (checkbox.is(':checked')) { console.log('is checked!'); } else { console.log('not checked...'); } }, 10); }); calll来处理事件，这绝对不是一个好习惯。

所以我只是想知道是否有人有更好的解决方案？或者我做错了什么？

Answer 1

这将触发已选中/未选中的事件。

$('.transactionSheetToolbarShowDraft').on('click','input',function() {
  var checkStatus = ($('input').prop('checked'))? 'is checked!': 'not checked...';
  console.log(checkStatus);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group transactionSheetToolbarStatusToggle" data-toggle="buttons">
            <label class="transactionSheetToolbarShowDraft btn btn-default active">
                <input type="checkbox" autocomplete="off" checked="checked">Draft
            </label>
            <label class="transactionSheetToolbarShowFinalised btn btn-default active">
                <input type="checkbox" autocomplete="off" checked="checked">Finalised
            </label>
            <label class="transactionSheetToolbarShowVoid btn btn-default">
                <input type="checkbox" autocomplete="off">Voided
            </label>
        </div>

Bootstrap：当label.btn中的复选框时，更改事件不起作用。

1 个答案: