如何设置选中的单选输入的父标签的样式

Question

我需要风格化一些 radio 输入。我从这里尝试了一些解决方案，但没有一个对我有用。有人可以看看这段代码并告诉我我能做什么吗？

这是 HTML：

 <div class="controls">
  <table>
    <tbody>
      <tr>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="0">Berlina
          </label>
        </td>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="1">Break
          </label>
        </td>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="2">Cabrio
          </label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

和CSS：

 label.radio {
  background: #fcb608;
}
.radio input {
  display: none;
}
label.radio input[type="radio"]:checked + label {
  background: #000 !important;
  border: 1px solid green;
  padding: 2px 10px;
}

CSS 没有达到预期的效果；你能帮我么？

这是JS的一些相关摘录：

 //If checkboxes or radio buttons, special treatment

  else if (jQ('input[name="'+parentname+'"]').is(':radio')  || jQ('input[name="'+parentname+'[]"]').is(':checkbox')) {
    var find = false;
    var allVals = [];
    jQ("input:checked").each(function() {
      for(var i = 0; i < parentvalues.length; i++) {
        if (jQ(this).val() == parentvalues[i] && find == false) {
          jQ('#adminForm #f'+child).show();
          jQ('#adminForm #row_'+child).show();
          find = true;
        }
      }
    });
    if (find == false) {
      jQ('#adminForm #f'+child).hide();
      jQ('#adminForm #row_'+child).hide();
      //cleanup child field
      if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) {
        jQ('#adminForm #f'+child).attr('checked', false);
      }
      else {
        if (cleanValue == true) {
          jQ('#adminForm #f'+child).val('');
        }
      }
    }
  }
  else {
    var find = false;
    for(var i = 0; i < parentvalues.length; i++) {
      if (jQ('#adminForm #f'+parentname).val() == parentvalues[i] && find == false) {
        jQ('#adminForm #f'+child).show();
        jQ('#adminForm #row_'+child).show();
        find = true;
      }
    }
    if(find == false) {
      jQ('#adminForm #f'+child).hide();
      jQ('#adminForm #row_'+child).hide();
      //cleanup child field
      if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) {
        jQ('#adminForm #f'+child).attr('checked', false);
      }
      else {
        if (cleanValue == true) {
          jQ('#adminForm #f'+child).val('');
        }
      }
    }
  }
}

function dependency(child,parentname,parentvalue) {
  var parentvalues = parentvalue.split(",");
  //if checkboxes
  jQ('input[name="'+parentname+'[]"]').change(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#'+child).change();
  });
  //if buttons radio
  jQ('input[name="'+parentname+'"]').change(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#'+child).change();
  });
  jQ('#f'+parentname).click(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#f'+child).change();
  });
  checkdependency(child,parentname,parentvalues,false);
}

原文由 Dinu Raph Alexandru 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个潜在可能

在我发帖时，我不确定所需的布局应该是什么，但尝试的 CSS 中有一个特定问题需要解决。

相邻兄弟选择器：

… 分隔两个选择器并仅匹配紧跟在第一个元素之后的第二个元素。

如果 <input> 是 <label> 的子项，则它不相邻，因此：

 label.radio input[type="radio"]:checked + label

is looking for a label immediately following a :checked input inside a label with the class .radio , nothing like那存在。

在这种情况下，要更改 label 的样式，需要一个影响父级的选择器， 目前这是不可能的。

So, to select the label of the :checked input , we need the label to be adjacent, not the parent.

我们可以使用 for="id" 属性：

<label> 可以通过将控件元素放置在 <label> 元素内，或使用 for 属性与控件相关联。

正如我所说，我不确定所需的布局应该是什么，但这是一个使用 for 属性的示例，看起来还不错。

 div {
  display: inline-block;
  position: relative;
}
label {
  background: #fcb608;
  padding: 2px 10px 2px 1.5em;
  border: 1px solid transparent; /* keeps layout from jumping */
}
input {
  position: absolute;
}
input[type="radio"]:checked + label {
  background: #000;
  border-color: green;
  color: white;
}

 <div>
  <input id="id1" type="radio" name="ad_caroserie" value="0">
  <label for="id1" class="radio">Berlina</label>
</div>
<div>
  <input id="id2" type="radio" name="ad_caroserie" value="1">
  <label for="id2" class="radio">Break</label>
</div>
<div>
  <input id="id3" type="radio" name="ad_caroserie" value="2">
  <label for="id3" class="radio">Cabrio</label>
</div>

与 <input> 作为 <label> 的孩子

使用小型 JavaScript 处理程序 侦听 <form> 的 更改。

• If a change is detected, the triggered function checks if an <input type="radio"> was changed, and if so, if it has a <label> as its parentElement 。
• If that’s true, it checks to see if there’s an identically named <input type="radio"> that’s a child of a <label> element with the class .checked .
• If there is, it removes the class from the <label> before applying the same class to the <label> parent of the <input> target 触发了整个事件。

 let form = document.querySelector( "form" );

form.addEventListener( "change", ( evt ) => {
  let trg = evt.target,
      trg_par = trg.parentElement;

  if ( trg.type === "radio" && trg_par &&
       trg_par.tagName.toLowerCase() === "label" ) {

    let prior = form.querySelector( 'label.checked input[name="' +
                                    trg.name + '"]' );

    if ( prior ) {
      prior.parentElement.classList.remove( "checked" );
    }

    trg_par.classList.add( "checked" );

  }
}, false );

 label {
  background: #fcb608;
  padding: 2px 10px 2px 0;
  border: 1px solid transparent; /* keeps layout from jumping */
}
label.checked {
  background: #000;
  border-color: green;
  color: white;
}

 <form>
  <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label>
  <label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label>
  <label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label>
</form>

如果没有 JavaScript ，事情就会变得困难（根据我最初的解释，为什么在这种情况下最好使用 for 属性）。

我们可以使用 appearance 属性（ 带有前缀 和 合理的支持）来有效地隐藏用户代理 radio GUI，然后使用剩余的 无脸 元素来构建一个 假 的 background 对于 <label> 。

这是非常骇人听闻的，而且动态性比默认值低很多，因为需要一些 absolute 定位和特定尺寸才能实现。

它有点工作（在大多数浏览器中），但很难在整个站点范围内实施。

不过可以玩的东西:-)

 input {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 5em;
  height: 1.5em;
  z-index: -1;
  background: #fcb608;
  border: 1px solid transparent;
  margin: -.1em -.8em;
  outline: 0;
}
label {
  display: inline-block;
  width: 5em;
  color: white;
  text-shadow: 1px 1px 0px black;
}
input[type="radio"]:checked {
  background: #000;
  border-color: green;
}

 <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label>
<label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label>
<label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label>

原文由 Fred Gandt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需将 jQuery 与新的 css 类“选中”一起使用，如下所示：

开始时：

 $("input[name='ad_caroserie']:checked").parent().addClass("selected");

和改变：

 $('input[type=radio][name=ad_caroserie]').change(function() {
  $("input[name='ad_caroserie']").parent().removeClass("selected");
  $("input[name='ad_caroserie']:checked").parent().addClass("selected");
  // console.log($("input[name='ad_caroserie']:checked").val());
});

原文由 paddibr 发布，翻译遵循 CC BY-SA 3.0 许可协议