Question

我搜索了SO和Google，我找不到任何相关内容。有没有什么方法可以隐藏图像旁边的单选按钮（用作标签）但单击标签时仍保留其功能？

我尝试了几种方法，但似乎使用display:none或visibility:hidden会使广播功能失效。

Answer 1

我尝试了几种方法，但似乎使用display：none或visibility：hidden使得无线电功能无效。

但它有效。也许你没有设置for属性：

<input id=radio1 name=testradios type=radio><label for=radio1>radio1</label>
<br>
<input id=radio2 name=testradios type=radio><label for=radio2>radio2</label>

#radio1 {
    display: none;
}

OR

#radio1 {
    visibility: hidden;
}

两个隐藏单选按钮但标签仍然可以点击并检查其单选按钮。

http://jsfiddle.net/m0fbd75w/

Answer 2

用另一个颜色与背景相匹配的div覆盖它们。这将隐藏单选按钮，仍然您的单选按钮将用于标签的点击。希望有所帮助..

Answer 3

＆＃13;

document.getElementById('myId').addEventListener('click', function() {
  alert(this.checked);
})

＆＃13;

label {
  display: inline-block;
}
label:before {
  content: '';
  background: url('http://placehold.it/350x150') no-repeat;
  width: 30px;
  height: 30px;
  display: inline-block;
}
input {
  display: none;
}

＆＃13;

<input type="radio" id="myId">
<label for="myId"></label>

＆＃13;

Answer 4

在Angular中，display:none或visibility:hidden对我不起作用。相反，我使用了：

input[type=radio] { opacity: 0; }

隐藏单选按钮，同时保持其功能

4 个答案: