效果如上图。
代码如下
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>radio</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"></head> <style type="text/css"> div{ position: relative; line-height: 20px; } input[type="radio"]{ z-index: 2; width: 20px; height: 20px; opacity: 0; } .radio_label{ position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border: 1px solid #999; } input:checked+.radio_label { background-color: #fe6d32; border: 1px solid #fe6d32; } input:checked+.radio_label::after { position: absolute; content: ""; width: 5px; height: 10px; top: 3px; left: 6px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) } </style> <body> <div> <input type="radio" name="sex" id="1" value="1"> <label for="1" class="radio_label"></label> <label for="1">第一个测试</label> </div> <div> <input type="radio" name="sex" id="2" value="2"> <label for="2" class="radio_label"></label> <label for="2">第一个测试</label> </div> <div> <input type="radio" name="sex" id="3" value="3"> <label for="3" class="radio_label"></label> <label for="3">第一个测试</label> </div> <button id="btnSubmit">提交</button> </body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $("#btnSubmit").click(function(){ var val=$('input:radio[name="sex"]:checked').val(); if(val==null){ alert("什么也没选中!"); return false; } else{ alert(val); } }) </script> </html> |