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

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：

  

label元素表示用户界面中的标题。 标题可以与特定表单控件关联，称为标签元素的标记控件，使用for属性，或将表单控件放在标签元素本身

因此，您的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>