如何在输入标签上使用没有ID属性的标签标签的FOR属性
如何在输入标签上使用没有ID属性的标签标签的FOR属性
提问于 2010-04-24 13:35:20
下面的代码中说明的问题有解决方案吗？首先，在浏览器中打开代码，直接进入主题，而不必在知道要查找的内容之前查看所有这些代码。
<html>
<head>
<title>Input ID creates problems</title>
<style type="text/css">
#prologue, #summary { margin: 5em; }
</style>
</head>
<body>
<h1>Input ID creates a bug</h1>
<p id="prologue">
In this example, I make a list of checkboxes representing things which could appear in a book. If you want some in your book, you check them:
</p>
<form>
<ul>
<li>
<input type="checkbox" id="prologue" />
<label for="prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="chapter" />
<label for="chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="summary" />
<label for="summary">summary</label>
</li>
<li>
<input type="checkbox" id="etc" />
<label for="etc">etc</label>
<label>
</li>
</ul>
</form>
<p id="summary">
For each checkbox, I want to assign an ID so that clicking a label checks the corresponding checkbox. The problems occur when other elements in the page already use those IDs. In this case, a CSS declaration was made to add margins to the two paragraphs which IDs are "prologue" and "summary", but because of the IDs given to the checkboxes, the checkboxes named "prologue" and "summary" are also affected by this declaration. The following links simply call a javascript function which writes out the element whose id is <a href="javascript:alert(document.getElementById('prologue'));">prologue</a> and <a href="javascript:alert(document.getElementById('summary'));">summary</a>, respectively. In the first case (prologue), the script writes out [object HTMLParagraphElement], because the first element found with id "prologue" is a paragraph. But in the second case (summary), the script writes out [object HTMLInputElement] because the first element found with id "summary" is an input. In the case of another script, the consequences of this mix up could have been much more dramatic. Now try clicking on the label prologue in the list above. It does not check the checkbox as clicking on any other label. This is because it finds the paragraph whose ID is also "prologue" and tries to check that instead. By the way, if there were another checkbox whose id was "prologue", then clicking on the label would check the one which appears first in the code.
</p>
<p>
An easy fix for this would be to chose other IDs for the checkboxes, but this doesn't apply if these IDs are given dynamically, by a php script for example.
Another easy fix for this would be to write labels like this:
<pre>
<label><input type="checkbox" />prologue</label>
</pre>
and not need to give an ID to the checkboxes. But this only works if the label and checkbox are next to each other.
</p>
<p>
Well, that's the problem. I guess the ideal solution would be to link a label to a checkboxe using another mechanism (not using ID). I think the perfect way to do this would be to match a label to the input element whose NAME (not ID) is the same as the label's FOR attribute. What do you think?
</p>
</body>
</html>回答 5
Stack Overflow用户
回答已采纳
发布于 2010-04-24 13:56:50
在我看来，最好的做法是对所有复选框进行重命名，在它们的is上添加一些前缀，例如input
<ul>
<li>
<input type="checkbox" id="input_prologue" />
<label for="input_prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="input_chapter" />
<label for="input_chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="input_summary" />
<label for="input_summary">summary</label>
</li>
<li>
<input type="checkbox" id="input_etc" />
<label for="input_etc">etc</label>
</li>
</ul>这样，您将不会与页面上的其他ids发生任何冲突，并且单击标签将在没有任何特殊javascript函数的情况下切换复选框。
Stack Overflow用户
发布于 2013-02-06 20:31:12
这里已经解决了这个问题：https://stackoverflow.com/a/8537641只需这样做
<label><input type="checkbox">Some text</label>Stack Overflow用户
发布于 2010-04-24 13:47:28
简而言之，一个ID只应该在一个页面上使用一次，所以他们不会为一个页面上不应该存在的多个ID设计一个解决方案。
回答剩下的问题:不，ID属性是标签的'for‘属性唯一要看的东西。您总是可以使用JavaScript onclick事件通过名称获取输入并更改它，尽管当您只需修复ID问题时，这似乎过于复杂，这将更有意义。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2703356
复制相关文章
相似问题
腾讯云开发者
