如何设置选中的单选输入的父标签的样式 [英] How to style the parent label of a checked radio input

查看：0
本文介绍了如何设置选中的单选输入的父标签的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要样式化一些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);
}

推荐答案

一种可能性

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

The adjacent siblings selector：

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

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

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

正在寻找紧跟在类.radio的label中的:checkedinput之后的label，但不存在此类内容。

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

因此，若要选择:checkedinput的label，我们需要label相邻，而不是父级。

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

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 
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>的子项

使用小型Java处理程序listeningFORchanges到<form>。

  • 如果检测到change，则触发函数将检查<input type="radio">是否已更改，如果是，则检查是否将<label>作为其parentElement。
  • 如果为真，它会检查是否存在同名的<input type="radio">，它是<label>元素的子元素，class.checked。
  • 如果有，它将从<label>中删除class，然后将相同的class应用于触发整个事件的<input>target的父级。
数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假"> 
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图形用户界面，然后使用剩余的facless元素为<label>构建伪background。

这非常老套，而且比默认设置要差得多，因为需要一些absolute定位和特定的尺寸才能完成。
它可以(在大多数浏览器中)运行，但在站点范围内执行起来很棘手。

一些可以玩耍的东西：-)

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 
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>

这篇关于如何设置选中的单选输入的父标签的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆