如何使用INPUT标签上没有ID属性的LABEL标签的FOR属性
下面的代码说明了问题的解决方案吗？首先在浏览器中打开代码以便直观地看到问题，而不必在知道要查找的内容之前查看所有代码。如何使用INPUT标签上没有ID属性的LABEL标签的FOR属性
<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>
最好的，在我看来，你可以做什么，就是要重命名所有的复选框，通过添加一些前缀，它们的ID例如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>
这样，你不会有任何冲突页面上的其他ID以及单击该标签将切换复选框而不使用任何特殊的JavaScript功能。
简单地说，一个ID只应该是一个页面上使用一次，所以没有他们不会设计了多个ID的一个解决方法这是不应该出现在一个页面上。
要回答问题的其余部分：否，ID属性是标签的'for'属性将查看的唯一内容。您可以随时使用JavaScript onclick事件通过名称获取输入内容并对其进行更改，但如果您可以修复您的ID问题，这看起来过于复杂，这会使情况更加明显。
+1，一石二攻。一些没有意义的FYI：for属性是数据类型IDREF，它看起来类型ID的值，它必须是唯一的。这些是XML Schema可用的遗留数据类型，所以我想这意味着它们是SGML的常驻数据类型。 – 2010-04-24 06:01:14
当输入的ID是动态创建时发生问题。当我为页面上的其他元素选择ID时，我不知道它们会是什么，所以我不能确保它们不会有重复。正如你所说，JavaScript解决方案过于复杂（有些人没有JavaScript）。 – Shawn 2010-04-29 23:11:52
为这些ID生成GUID。 – Triynko 2016-09-15 13:07:31
编辑：回想起来，我的解决方案是远非理想。我建议你，而不是利用“隐式标签协会”，如图这样的回答：*.com/a/8537641/884734
我的建议，低于理想的解决方案是如下：
这个问题可以通过一些JavaScript迎刃而解。只要将下面的代码到网页的js文件的一个给<label>标签以下行为：
当点击标签：
如果有id匹配标签的for属性页面上的元素，恢复默认功能并关注该输入。
如果使用id没有发现匹配，寻找label的用class匹配label的for属性的兄弟姐妹，并将重点。
这意味着，你可以制定出你这样的形式：
<form>
<label for="login-validation-form-email">Email Address:</label>
<input type="text" class="login-validation-form-email" />
</form>
唉，实际代码：
$(function(){
$('body').on('click', 'label', function(e){
var labelFor = $(this).attr('for');
if(!document.getElementById(labelFor)){
e.preventDefault(); e.stopPropagation();
var input = $(this).siblings('.'+labelFor);
if(input)
input[0].focus();
}
})
});
注：与W3C规范验证您的网站时，这可能会导致问题，因为<label>for属性应该始终在页面上具有匹配ID的对应元素。
希望这会有所帮助！
感谢谁downvoted。回想起来，我的解决方案并不理想。我建议您改用这个答案中显示的“隐式标签关联”：http://*.com/a/8537641/884734 – Eric 2016-06-01 13:04:34
也许容易简单的解决方案将使用UNIQUEID（）PHP或其他编程语言的替代功能。
除了没有明确的问题，这是http://*.com/questions/8537621/possible-to-associate-label-with-checkbox-without-using-for-id的重复。 – 2016-02-29 04:02:24