Question

嘿，我知道如何创建一个基于图像库的收音机盒，问题是如何创建一个只有文本的收音机盒（单选按钮被隐藏）？并且文本是可点击的。

Answer 1

您可以尝试这样的事情：

<!DOCTYPE html>
<html>
<head> <style type="text/css">
    input[type='radio'] {
    opacity:0;
}
  </style>
</head>
<body>
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>      
</body>
</html>

Answer 2

HTML：

    <input type="radio" id="radio1" name="radio_name" value="1" checked="checked">
    <label for="radio1">Radio 1</label>
    <br />
    <input type="radio" id="radio2" name="radio_name" value="2">
    <label for="radio2">Radio 2</label>
    <br />
    <input type="radio" id="radio3" name="radio_name" value="3">
    <label for="radio3">Radio 3</label>

CSS：

input[type="radio"] { display:none; }
input[type="radio"]:checked + label{ font-weight: bold }

这里的简单演示：JSFiddle

Answer 3

我从你的问题中了解到你想要一个文本单选按钮，而不是一个圆圈，文本是可点击的并传递值（0,1）所以检查这个代码希望它能帮助你...... / p>

<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <style>
        label{
            border:1px blue solid;
            padding:10px;
            margin:20px;
        }
    </style>
    <script>
        $("document").ready(function(){
            //alert('ok');
            var tr;
            $("#txtradio").click(function(){
                //alert('ok');
                tr = tr==0?1:0;
                //alert(tr);
                if(tr==1){
                    $("label").css({"background-color":"blue","color":"white"});
                }else{
                    $("label").css({"background-color":"white","color":"black"});
                }
            });
        })
    </script>
</head>
<body>
    <label id="txtradio">
        sunil
    </label>
</body>

Answer 4

答案非常简单

＆＃13;

input[type="checkbox"] {
        position:absolute;
        opacity:0;
    }
    input[type="checkbox"] + span {
        border:2px solid #D3D3D3;
        border-radius:6px;
    }
     input[type="checkbox"]:checked + span {
        border-color:#4df;
    }

＆＃13;

<label>
  <input class="graph_checkbox" type="checkbox" /><span>HelloWorld</span> 
</label>

＆＃13;

如何创建radiobox文本库

4 个答案: