如何设置已检查单选输入的父标签的样式

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);
}

Answer 1

一种可能性

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

The adjacent siblings selector:

... 分隔两个选择器，仅当第二个元素紧跟第一个元素时才匹配它。

如果<input> 是<label> 的子代，则它不相邻，所以当：

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

正在寻找label 紧跟在label 中的input 和.radio 类之后的label，不存在类似的东西。

在这种情况下，要更改 label 的样式，需要一个影响父级的选择器，即 currently isn't possible。

因此，要选择:checked input 中的label，我们需要label 相邻，而不是父节点。

我们可以使用for="id" attribute:

<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 处理程序将listening 用于changes 到<form>。

• 如果检测到 change，触发的函数会检查 <input type="radio"> 是否已更改，如果已更改，是否将 <label> 作为其 parentElement。
• 如果是这样，它会检查是否存在同名的 <input type="radio">，它是具有 class .checked 的 <label> 元素的子元素。
• 如果有，它会从<label> 中删除class，然后再将相同的class 应用于触发整个事情的<input> target 的父级<label>。

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 property（with prefixes和reasonable support）有效地隐藏用户代理radio GUI，然后使用剩余的faceless元素构建一个假的 background 为<label>。

这非常 hacky，并且比默认的动态少很多，因为需要一些 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>

Answer 2

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

开始时：

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

和 onchange：

$('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());
});

Answer 3

在尝试了这么多纯 HTML 和 CSS 之后。我正在使用 JavaScript 解决这个简单的解决方案。我认为这会有所帮助。

function check(btn) {
  let label = btn.children;
  label[0].checked = true;
}

.lib-radio {
  color: #1e1e1e;
  font-size: 1.0em;
  border-radius: 31px;
  font-weight: 400;
  width: 450px;
  height: 40px;
  border: 2px solid black;
  padding: 0.5em;
  font-family: Lato;
  margin: 10px 0 0 0;
}

.lib-radio:hover {
  background-color: #000;
  color: #FFF;
}

<div class="lib-one-input">

  <p class="lib-form-label">Select your gender</p>

  <div class="lib-radio" onclick="check(this)">

    <input id="s1yes" type="radio" name="mcq1" value="male">

    <label for="s1yes"> Yes, our researchers authored it</label><br />

  </div>

  <div class="lib-radio" onclick="check(this)">

    <input id="s1no" type="radio" name="mcq1" value="female">

    <label for="s1no"> No, we didn&#39t author it </label><br />

  </div>

</div>

Answer 4

<form id="button-form">
  <fieldset id="button-set">
    <label for="button-1">
      <input type="radio" id="button-1" name="button-group"/>
    </label>

    <label for="button-2">
      <input type="radio" id="button-2" name="button-group"/>
    </label>

    <label for="button-3">
      <input type="radio" id="button-3" name="button-group"/>
    </label>
  </fieldset>
</form>

<style>
  #button-set label > * {
    opacity: 0; <!-- hideing the radio buttons -->
  }
</style>

<script>
  function setColor(color) {
    document.getElementsByName("button-group").forEach(node => {
      node.checked === true
        ? (node.parentElement.style.background = color)
        : (node.parentElement.style.background = "rgba(0, 0, 0, 0.5)");
    });
  }

  window.onload = () => {
    document.getElementById("button-form").onchange = evt => {
      switch (evt.target) {
        case document.getElementsById("button-1"):
          setColor("rgba(0, 150, 0, 0.5)");
          break;
        case document.getElementsById("button-2"):
          setColor("rgba(250, 200, 0, 0.5)");
          break;
        case document.getElementsById("button-3"):
          setColor("rgba(250, 0, 0, 0.5)");
          break;
      }
    };
  };
</script>