1. <i id='eYz0c'><tr id='eYz0c'><dt id='eYz0c'><q id='eYz0c'><span id='eYz0c'><b id='eYz0c'><form id='eYz0c'><ins id='eYz0c'></ins><ul id='eYz0c'></ul><sub id='eYz0c'></sub></form><legend id='eYz0c'></legend><bdo id='eYz0c'><pre id='eYz0c'><center id='eYz0c'></center></pre></bdo></b><th id='eYz0c'></th></span></q></dt></tr></i><div id='eYz0c'><tfoot id='eYz0c'></tfoot><dl id='eYz0c'><fieldset id='eYz0c'></fieldset></dl></div>

        • <bdo id='eYz0c'></bdo><ul id='eYz0c'></ul>

      1. <legend id='eYz0c'><style id='eYz0c'><dir id='eYz0c'><q id='eYz0c'></q></dir></style></legend>
        <tfoot id='eYz0c'></tfoot>
      2. <small id='eYz0c'></small><noframes id='eYz0c'>

        htmlFor 不工作

        时间:2023-10-20

        <small id='WSFMa'></small><noframes id='WSFMa'>

            <i id='WSFMa'><tr id='WSFMa'><dt id='WSFMa'><q id='WSFMa'><span id='WSFMa'><b id='WSFMa'><form id='WSFMa'><ins id='WSFMa'></ins><ul id='WSFMa'></ul><sub id='WSFMa'></sub></form><legend id='WSFMa'></legend><bdo id='WSFMa'><pre id='WSFMa'><center id='WSFMa'></center></pre></bdo></b><th id='WSFMa'></th></span></q></dt></tr></i><div id='WSFMa'><tfoot id='WSFMa'></tfoot><dl id='WSFMa'><fieldset id='WSFMa'></fieldset></dl></div>
              <bdo id='WSFMa'></bdo><ul id='WSFMa'></ul>

                  <tbody id='WSFMa'></tbody>
                <legend id='WSFMa'><style id='WSFMa'><dir id='WSFMa'><q id='WSFMa'></q></dir></style></legend>

                1. <tfoot id='WSFMa'></tfoot>
                  本文介绍了htmlFor 不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我使用 JavaScript 为每个按钮创建了 3 个 radio 按钮和一个 label.当我尝试使用 htmlFor 在标签中添加 for 时,它不会将其应用于实际的 DOM 元素.意思是,当我尝试在网页上使用 label 时,它不会选择 radio 按钮.

                  I created 3 radio buttons and a label for each of them using JavaScript. When I try adding for in the label using htmlFor, it doesn't apply it to the actual DOM Element. Meaning, when I try using the label on the webpage, it doesn't select the radio button.

                  我检查了开发人员工具,发现 labels 没有应用 for.

                  I checked in the developer tools, and saw that the labels did not have for applied to them.

                  我做错了什么,我该如何解决?

                  What am I doing wrong, and how can I fix it?

                  JSFiddle

                  var _doc = document,
                    sliderWrapper = _doc.getElementById('sliderWrapper'),
                    radioWrapper = _doc.createElement('div');
                  
                  for (var i = 0; i < 3; i++) {
                    var radio = _doc.createElement('input');
                    var niceRadio = _doc.createElement('lable');
                    var index = radioWrapper.children.length / 2;
                  
                    niceRadio.className = 'niceRadio';
                    niceRadio.htmlFor = radio.id = 'sliderRadio' + index;
                    radio.type = 'radio';
                    radio.name = 'myName';
                  
                    radioWrapper.appendChild(radio);
                    radioWrapper.appendChild(niceRadio);
                    console.log(niceRadio.htmlFor);
                  }
                  
                  sliderWrapper.appendChild(radioWrapper);

                  .niceRadio {
                    position: relative;
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                    border-radius: 50%;
                    border: 5px solid orange;
                  }
                  .niceRadio:hover {
                    border-color: lightblue;
                  }

                  <div id="sliderWrapper">
                  </div>

                  推荐答案

                  htmlFor 用于将标签绑定到特定的表单元素.但是,它使用该表单元素的 id(而不是 name).

                  The htmlFor is used to bind a label to a specific form element. However, it uses the id of that form element (not the name).

                  来源MDN:

                  HTMLLabelElement.htmlFor 属性反映了 for 的值内容属性.这意味着这个脚本可访问的属性是用于设置和读取 的 content 属性的值,即标签关联控件元素的 ID.

                  The HTMLLabelElement.htmlFor property reflects the value of the for content property. That means that this script-accessible property is used to set and read the value of the content property for, which is the ID of the label's associated control element.

                  另外,在你的小提琴中,你拼错了 label.

                  Also, in your fiddle, you misspelled label.

                  更新小提琴:https://jsfiddle.net/h09mm827/2/

                  这篇关于htmlFor 不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:即使在回发后也保持用户检查radiobtn检查 下一篇:CSS复选框和输入在标签内时的单选按钮?

                  相关文章

                  • <bdo id='78GrZ'></bdo><ul id='78GrZ'></ul>
                  <tfoot id='78GrZ'></tfoot>

                  <i id='78GrZ'><tr id='78GrZ'><dt id='78GrZ'><q id='78GrZ'><span id='78GrZ'><b id='78GrZ'><form id='78GrZ'><ins id='78GrZ'></ins><ul id='78GrZ'></ul><sub id='78GrZ'></sub></form><legend id='78GrZ'></legend><bdo id='78GrZ'><pre id='78GrZ'><center id='78GrZ'></center></pre></bdo></b><th id='78GrZ'></th></span></q></dt></tr></i><div id='78GrZ'><tfoot id='78GrZ'></tfoot><dl id='78GrZ'><fieldset id='78GrZ'></fieldset></dl></div>
                      <legend id='78GrZ'><style id='78GrZ'><dir id='78GrZ'><q id='78GrZ'></q></dir></style></legend>
                    1. <small id='78GrZ'></small><noframes id='78GrZ'>