Question

我有一组具有以下结构的checkboxes：

<div>
  <div>
    <label><input type="checkbox" value="a1"/>A1</label>
  </div>
  <div>
    <label><input type="checkbox" value="a2"/>A2</label>
  </div>
  ...
</div>

复选框仅用于UI控件（不用于表单提交）。我有一个关联的html元素，它具有onclick jQuery函数，可以清除所有复选框。此元素目前只是div。在语义上，是否有任何最佳实践可以说明这应该是button，a（没有href值）还是继续div？

Answer 1

您应该使用button element中的button state（或input element中的button state）。

为什么不a？因为它只应用于资源链接。

为什么不div？因为它在默认情况下不可聚焦（对于键盘用户而言），并且因为它没有隐含的WAI-ARIA角色（用于辅助功能），因此您必须手动添加这两个功能，实质上是重新创建已存在的元素：button。

Answer 2

语义学是一只垂死的渡渡鸟。说过这是我尝试达到似乎在很大程度上被忽视的标准。我只是使用最适合该任务的任何元素，并且似乎是逻辑的，通用的div和span是最后要考虑的。我认为保持代码不会出现在呈现和标记中也是一个主要目标，因此请使用addEventListener代替属性事件处理程序，例如onclick

段

var allchx = document.getElementById('allChecks');

allchx.addEventListener('change', function(e) {
  this.checked ? checkUncheck(true) : checkUncheck(false);
}, false);

function checkUncheck(chxBool) {
  var chxList = document.querySelectorAll('input[name^="question"]');
  var qty = chxList.length;
  for (let i = 0; i < qty; i++) {
    chxList[i].checked = chxBool;
  }
}

<form id='survey' name='survey' action='http://httpbin.org/post' method='post'>
  <fieldset class='checkboxSet'>
    <legend>Product Survey</legend>
    <label for='allChecks'>
      <input id='allChecks' type='checkbox'>Check/Uncheck All</label>
    <hr/>
    <ol>
      <li>
        <label for='question1'>
          <input id='question1' name='question1' type='checkbox' value='smoker'>Do you smoke?</label>
      </li>
      <li>
        <label for='question2'>
          <input id='question2' name='question2' type='checkbox' value='lard eater'>Do you eat lard?</label>
      </li>
      <li>
        <label for='question3'>
          <input id='question3' name='question3' type='checkbox' value='potential customer'>Do you have explosive diareha?</label>
      </li>
      <li>
        <label for='question4'>
          <input id='question4' name='question4' type='checkbox' value='definite customer'>Would you be interested in having explosive diareha in the near future?</label>
      </li>
    </ol>
    <input type='submit'>
  </fieldset>
</form>

作用于`input`

2 个答案:

段