计算选中属性的最短方法

Question

我在 AEM 中有一个复选框列表当我们点击复选框时，checked 属性将被放置在父元素上，而不是在输入框中。我要统计检查了多少

console.log(
  $('.isCorrectanswer').attr('checked').length
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<coral-checkbox class="isCorrectanswer" checked>
  <input type="checkbox" name="./checkboxone" />
  <label>checkbox</label>
</coral-checkbox>
<coral-checkbox class="isCorrectanswer" checked>
  <input type="checkbox" name="./checkboxtwo" />
  <label>checkbox</label>
</coral-checkbox>
<coral-checkbox class="isCorrectanswer">
  <input type="checkbox" name="./checkboxthree" />
  <label>checkbox</label>
</coral-checkbox>
<coral-checkbox class="isCorrectanswer">
  <input type="checkbox" name="./checkboxfour" />
  <label>checkbox</label>
</coral-checkbox>
<coral-checkbox class="isCorrectanswer">
  <input type="checkbox" name="./checkboxfive" />
  <label>checkbox</label>
</coral-checkbox>

这对我不起作用...

Answer 1

使用 .isCorrectanswer[checked] 选择器：

console.log(
  $('.isCorrectanswer[checked]').length
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<coral-checkbox class="isCorrectanswer" checked>
    <input type="checkbox" name="./checkboxone" />
    <label>checkbox</label>
  </coral-checkbox>
  <coral-checkbox class="isCorrectanswer" checked>
    <input type="checkbox" name="./checkboxtwo" />
    <label>checkbox</label>
  </coral-checkbox>
  <coral-checkbox class="isCorrectanswer">
    <input type="checkbox" name="./checkboxthree" />
    <label>checkbox</label>
  </coral-checkbox>
  <coral-checkbox class="isCorrectanswer">
    <input type="checkbox" name="./checkboxfour" />
    <label>checkbox</label>
  </coral-checkbox>
  <coral-checkbox class="isCorrectanswer">
    <input type="checkbox" name="./checkboxfive" />
    <label>checkbox</label>
  </coral-checkbox>

（旁注：为了命名的一致性，您可以考虑将 class 重命名为 isCorrectAnswer 或 is-correct-answer，这看起来很容易出现拼写错误，因为是)

计算选中属性的最短方法

Shortest way to count the checked attributes

checkbox

jquery

aem