打开带有跨度标签作为输入的单选按钮

Question

我有以下自动生成的 HTML 脚本来创建单选按钮。基于 Span 标签作为输入，我想检查相应的单选按钮。任何想法我该怎么做？这个脚本是通过 AI 自动生成的，因此我不能自己编辑这个脚本。此外，这些单选按钮没有 ID 或值属性。

<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
    <label>
        <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
            <span>
                Gemeenten
            </span>
   </label>
   <label>
        <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
            <span>
            Wijken
            </span>
   </label>
   <label>
       <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
           <span>
               Buurten
           </span>
   </label>
</div>
</form>

Answer 1

基本HTML

根据W3C's label specification：

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

所以你的 HTML 已经有了这个功能。只需运行代码片段即可查看：

<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
    <label>
        <input class="leaflet-control-layers-selector" type="radio" checked="checked" name="leaflet-base-layers"></input>
            <span>
                Gemeenten
            </span>
   </label>
   <label>
        <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
            <span>
            Wijken
            </span>
   </label>
   <label>
       <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
           <span>
               Buurten
           </span>
   </label>
</div>
</form>

这是您想要的最基本和最简单的实现，您已经拥有它，因此除此之外的任何其他内容都会使事情过于复杂。

jQuery

如果你真的想用 jQuery 来做到这一点，因为你有一些其他的脚本会干扰这个功能，那么只需为你的 span 元素添加一个事件监听器：

var spans = $('.leaflet-control-layers-base > label > span');
for (var i = 0; i < spans.length; ++i) {
  $(spans[i]).click(function() {
    $(this).parent().children('input.leaflet-control-layers-selector')[0].checked = true;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="leaflet-control-layers-list">
  <div class="leaflet-control-layers-base">
    <label>
      <input class="leaflet-control-layers-selector" type="radio" checked="checked" name="leaflet-base-layers"></input>
      <span>Gemeenten</span>
    </label>
    <label>
      <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
      <span>Wijken</span>
    </label>
    <label>
      <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
      <span>Buurten</span>
    </label>
  </div>
</form>

JavaScript

或者使用纯 JavaScript（这样你不需要库，但可能不适用于旧浏览器）：

var spans = document.querySelectorAll('.leaflet-control-layers-base > label > span');
for (var i = 0; i < spans.length; ++i) {
  spans[i].addEventListener('click', function() {
    this.parentNode.getElementsByClassName('leaflet-control-layers-selector')[0].checked = true;
  });
}

<form class="leaflet-control-layers-list">
  <div class="leaflet-control-layers-base">
    <label>
      <input class="leaflet-control-layers-selector" type="radio" checked="checked" name="leaflet-base-layers"></input>
      <span>Gemeenten</span>
    </label>
    <label>
      <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
      <span>Wijken</span>
    </label>
    <label>
      <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
      <span>Buurten</span>
    </label>
  </div>
</form>

Answer 2

这是一种不使用库的方法（不需要 jQuery）。此示例将检查 "Buurten" :

function check(label){
    for(var i=0, l=labels.length; i<l; i++){
        if(labels[i].textContent.trim(' ') == label){
            labels[i].parentNode
                     .getElementsByClassName('leaflet-control-layers-selector')[0]
                     .checked = true;
            return true;
        }
    }
    return false; // Label not found
}

var labels = document.querySelectorAll('.leaflet-control-layers-base label span');

// Check the element called "Buurten"
check('Buurten');

<!-- Exact HTML from your question -->
<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
    <label>
        <input class="leaflet-control-layers-selector"
               type="radio" checked="checked" name="leaflet-base-layers"></input>
            <span>
                Gemeenten
            </span>
   </label>
   <label>
        <input class="leaflet-control-layers-selector"
               type="radio" name="leaflet-base-layers"></input>
            <span>
            Wijken
            </span>
   </label>
   <label>
       <input class="leaflet-control-layers-selector"
               type="radio" name="leaflet-base-layers"></input>
           <span>
               Buurten
           </span>
   </label>
</div>
</form>

打开带有跨度标签作为输入的单选按钮

Turn on radio button with span label as input

javascript

jquery

radio-button

基本HTML

jQuery

JavaScript