可以将标签与checkbox关联而不使用“for = id”?

我知道把标签和checkbox相关联是很好的做法:

<input id="something" type="checkbox" value="somevalue" /> <label for="something">this is label text</label> 

..但我必须使用一个ID来关联它吗?
我甚至在意的主要原因是因为我喜欢能够点击一个标签来切换checkbox的值,但不喜欢使用一个简单的东西的想法。

我想我可以使用jQuery切换单击标签的前一个元素(checkbox),但也许有一些简单的我错过了。 https://stackoverflow.com/a/2720771/923817看起来像一个解决scheme,但用户说,它不能在IE浏览器。

3 Solutions collect form web for “可以将标签与checkbox关联而不使用“for = id”?”

是的,将input放置在标签内。

 <label><input type=checkbox name=chkbx1> Label here</label> 

请参阅HTML规范中的隐式标签关联

演示: JsFiddle

 .c-custom-checkbox { padding-left: 20px; position: relative; cursor: pointer; } .c-custom-checkbox input[type=checkbox] { position: absolute; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); height: 15px; width: 15px; padding: 0; border: 0; left: 0; } .c-custom-checkbox .c-custom-checkbox__img { display: inline; position: absolute; left: 0; width: 15px; height: 15px; background-image: none; background-color: #fff; color: #000; border: 1px solid #333; border-radius: 3px; cursor: pointer; } .c-custom-checkbox input[type=checkbox]:checked + .c-custom-checkbox__img { background-position: 0 0; background-color: tomato; } 
 <label class="c-custom-checkbox"> <input type="checkbox" id="valueCheck" /> <i class="c-custom-checkbox__img"></i>Some Label </label> 
 <label for="something">this is label text</label> <input id="something" type="checkbox" value="somevalue" /> 

实际上for属性被用于屏幕阅读器来禁用人员,所以对于不具有属性的可访问性没有用处

  • jQuery UI自动完成与JSON
  • jQuery UI自动完成 - 菜单消失hover
  • CoffeeScript - 不允许在Angularexpression式中引用DOM节点
  • 用多个<br>replace多个<br>
  • 简单的方法来将Javascript数组转换为逗号分隔的列表?
  • 使用JQuery计时器调用js函数
  • 如何隐藏highchart x轴数据值
  • 如何访问$(this)里面的ajax成功callback函数
  • jQuery data()返回undefined,attr()返回整数
  • 在jQuery中,是通过类或idselect比其他属性select更快?
  • 我如何确定一个jQuery对象是否被延迟?