如何创建单选框文本库

How to create radiobox text base

本文关键字：单选框 文本库 创建 何创建      更新时间：2023-09-26
嘿，我知道如何创建一个基于图像的单选

框，问题是如何创建一个只有文本的单选框（单选按钮被隐藏）？ 并且文本是可点击的。

我从您的问题中了解到您想要一个文本单选按钮，即文本可单击并传递值 （0,1），而不是圆圈，因此请检查此代码希望对您有所帮助....

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

你可以尝试这样的事情：

<!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>

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

答案很简单

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;
    }
<label>
  <input class="graph_checkbox" type="checkbox" /><span>HelloWorld</span> 
</label>

相关文章：