如何设置已检查无线电输入的父标签的样式

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中存在一个需要解决的特定问题.

相邻的兄弟选择器:

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

如果<input>是孩子<label>,那就不相邻了,所以:

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

正在寻找一个label紧跟在一个:checked input内部的一个label类.radio,并没有这样的存在.

要改变label这种情况下的样式,需要一个影响父节点的选择器,这当前是不可能的.

因此,要选择label的:checked input,我们需要的label是相邻的,而不是父母.

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

A <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>.

• 如果change被检测到,触发功能检查,如果<input type="radio">改变了,如果是的话,如果它有<label>它的parentElement.
• 如果这是真的,它会检查是否有一个相同的名称<input type="radio">,它是一个<label>元素的子元素class .checked.
• 如果有的话,它会将之前的内容class从触发整个内容的父级中删除.<label>class<label><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属性(带有前缀和合理的支持)来有效地隐藏用户代理radioGUI,然后使用剩余的无面元素来构建伪造 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 类“selected”一起使用，如下所示：

开始时：

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