jQuery 數據屬性僅在第二次單擊后更新

Question

我有這個 jquery 代碼，它應該打印所有選定的復選框：

$('.engagement-type').on('click', function () {
    var engagementTypes = $('.engagement-type').parent().find('[data-checkbox="checked"]');
    console.log(engagementTypes);
});

表中有 12 個復選框：

<td>
    <input name="EngagementTypes[0].EngagementTypeId" 
      id="EngagementTypes_0__EngagementTypeId" 
      type="hidden" value="1" data-val-required="The Engagement field is required." 
      data-val="true" data-val-number="The field Engagement must be a number.">

    <span class="pull-left">
        <div class="engagement-type" data-checkbox="checked">
            <input name="EngagementTypes[0].IsSelected" 
              id="EngagementTypes_0__IsSelected" type="checkbox" value="true" 
              data-val-required="The IsSelected field is required." 
              data-val="true">
            <input name="EngagementTypes[0].IsSelected" type="hidden" value="false">
        </div>
    </span>
    Audit
</td>

第一次單擊復選框后，我會得到所選參與類型的空列表。 只有在選中第二個復選框后才會出現第一個復選框。 這是為什么？

Answer 1

var engagementTypes = $('.engagement-type').parent().find('[data-checkbox="checked"]')

這僅在您單擊 div 參與類型時才有效。 但是，如果您單擊 div 中的復選框之一，則父級是具有復選框屬性的復選框，因此他不會在其中找到另一個復選框。

所以你應該總是選擇

var elementYouWant = $('.engagement-type')

然后檢查是否選中了數據屬性。

var dataElement = elementYouWant.data();
if (dataElement['checkbox'] == "checked") {
   console.log("Oh yeah baby")
}

當然，如果有多個，您應該為每個循環執行此操作。

Answer 2

正如@TJ Crowder 提到的，必須有您沒有提供的額外代碼。 至少將設置數據復選框的部分=選中。

我假設使用復選框狀態本身，如：

$('.engagement-type').on('click', function () {

    var engagementTypesChecked = $('.engagement-type').parent().find('input[type="checkbox"]:checked');
    console.log(engagementTypesChecked);

});