代码之家 › 专栏 › 技术社区 › Nemus

获取输入标记的子元素

javascript

Nemus · 技术社区 · 7 年前

<label> 标签就在下面 <input> 标记以用于以后的样式设置。我试过了 .firstElementChild null 价值观。如何获取已单击复选框字段的标签标签?这是我的密码:

var checkboxes = document.querySelectorAll("input[type='checkbox']");


for (var i = 0; i < checkboxes.length; i++) {
  console.log(checkboxes[i]);
  checkboxes[i].addEventListener('change', (e) => {

    var targetCb = e.target;

    console.log(targetCb.firstElementChild);

  });
}

<ul>
  <li class="title mb-3">STYLISTIC SET</li>
  <li>
    <input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
    <label for="sSet1">Stylistic set 1</label>
  </li>
  <li>
    <input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
    <label for="sSet2">Stylistic set 2</label>
  </li>
  <li>
    <input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
    <label for="sSet3">Stylistic set 3</label>
  </li>
  <li>
    <input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
    <label for="sSet4">Stylistic set 4</label>
  </li>
</ul>

2 回复 | 直到 7 年前

CodeF0x 7 年前

你好像不知道 child elements 和 siblings

为儿童考虑以下几点:

<div id="parent">
  <div id="child">I'm the child of my parent.</div>
</div>

兄弟姐妹的情况如下:

<div id="sibling1"></div>
<div id="sibling2">I'm the sibling of sibling1.</div>

label s是 兄弟姐妹 input 元素。

console.log(targetCb.firstElementChild); 到 console.log(targetCb.nextElementSibling);

var checkboxes = document.querySelectorAll("input[type='checkbox']");


for (var i = 0; i < checkboxes.length; i++) {
  console.log(checkboxes[i]);
  checkboxes[i].addEventListener('change', (e) => {

    var targetCb = e.target;

    console.log(targetCb.nextElementSibling);

  });
}

<ul>
  <li class="title mb-3">STYLISTIC SET</li>
  <li>
    <input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
    <label for="sSet1">Stylistic set 1</label>
  </li>
  <li>
    <input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
    <label for="sSet2">Stylistic set 2</label>
  </li>
  <li>
    <input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
    <label for="sSet3">Stylistic set 3</label>
  </li>
  <li>
    <input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
    <label for="sSet4">Stylistic set 4</label>
  </li>
</ul>

Yoshimitsu 7 年前

var targetCb = e.target; 到 var targetCb = e.target.nextElementSibling;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前