如何使用INPUT标签上没有ID属性的LABEL标签的FOR属性
下面的代码是否有解决scheme？ 首先在浏览器中打开代码，直到find要点，而不必在知道要查找的内容之前查看所有代码。
<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> 在我看来，最好的办法就是重命名所有的checkbox，在它们的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发生冲突，单击标签将切换checkbox，而无需任何特殊的JavaScriptfunction。
它已经在这里解决： https : //stackoverflow.com/a/8537641只是这样做
<label><input type="checkbox">Some text</label>
编辑：回想起来，我的解决scheme远非理想。 我build议你改用这个答案中显示的“隐式标签关联”： stackoverflow.com/a/8537641/884734
我的build议，不太理想的解决scheme如下：
这个问题可以很容易地解决一个小的JavaScript。 只要将下面的代码放在页面的一个js文件中，给<label>标签以下行为：
当标签被点击时：
如果页面上有一个id与标签的for属性匹配的元素，则恢复为默认function并将该input聚焦。
如果找不到使用id匹配项，请使用与label的for属性匹配的class查找label的同级，然后将其聚焦。
这意味着你可以像这样布置你的表单：
<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规范validation您的站点时，这可能会导致问题，因为<label> for属性应该始终在页面上具有匹配ID的对应元素。
希望这可以帮助！
简单地说，一个ID只能在一个页面上使用一次，所以没有他们不会devise一个解决scheme的多个ID在单个页面上不应该存在。
回答问题的其余部分：否，ID属性是标签的“for”属性唯一要查看的内容。 您可以随时使用JavaScript onclick事件通过名称获取input内容并对其进行更改，但是如果您只是修复了您的ID问题，这看起来过于复杂，这样做会更有意义。
也许简单直接的解决scheme将使用uniqueid（）PHP或其他编程语言替代function。
