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

问题描述 投票：0回答：4

我需要对一些 

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);
}
html css radio-button
4个回答
22
投票

一种可能性

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

相邻兄弟选择器:

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

如果 

<input>
是 
<label>
的子级，则它不相邻，因此 while:

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
属性（带有前缀和合理的支持）来有效隐藏用户代理 
radio
GUI，然后使用剩余的 faceless 元素构建一个 fake 
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>

5
投票

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

开始时：

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

在尝试了很多次纯 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>

-1
投票
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.