一、利用複選框checkbox修改成單選框radio的效果(相對更好)
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<Script Language="JScript">
function checkedThis(obj,cname){
var boxArray = document.getElementsByName(cname);
// window.alert(cname);
for(var i=0;i<=boxArray.length-1;i++){
if(boxArray[i]==obj && obj.checked){
boxArray[i].checked = true;
}else{
boxArray[i].checked = false;
}
}
}
</Script>
</head>
<body>
<input type="checkbox" name="test" onclick="checkedThis(this,'test');">1
<input type="checkbox" name="test" onclick="checkedThis(this,'test');">2
<input type="checkbox" name="test" onclick="checkedThis(this,'test');">3
</body>
</html>二、純css寫單選框和複選框的樣式和功能
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>移動單選按鈕</title>
<link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css">
<style>
/*純CSS寫法*/
.checkbox-group input{display:none;opacity:0;}
.checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {
line-height: 1;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/*cursor: pointer;*/
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin:2px;
}
.checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
line-height: 20px;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
content: '';
color: #fff;
border: 1px solid #dce4e6;
background-color: #f3f6f8;
border-radius: 3px;
}
.checkbox-group input[type=checkbox]:checked+label:before,.checkbox-group input[type=radio]:checked+label:before{
/*content:'\2022';圓點*/
content:'\2713';
color:#fff;
background-color: #31b968;
border-radius: 3px;
font-size:16px;
text-align: center;
border-color: #31b968;
}
/*使用背景圖片寫法*/
.xuan-group input{display:none;opacity:0;}
.xuan-group input[type=checkbox]+label, .xuan-group input[type=radio]+label {
line-height: 1;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/*cursor: pointer;*/
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin:2px;
}
.xuan-group input[type=checkbox]+label:before, .xuan-group input[type=radio]+label:before {
line-height: 20px;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
content: '';
color: #fff;
border: 1px solid #dce4e6;
background-color: #f3f6f8;
border-radius: 3px;
}
.xuan-group input[type=checkbox]:checked+label:before,.xuan-group input[type=radio]:checked+label:before{
content:' ';
background:#e02222 url(images/input_checked_1.png) 2px 1px no-repeat;
background-size:80% 80%;
}
</style>
</head>
<body>
<div style="border:5px solid red;">
<p style="font-size:20px">純CSS寫法：</p>
<p>第一組單選</p>
<div class="checkbox-group">
<input type="radio" id="one" name="dan"/>
<label for="one">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="radio" id="two" name="dan"/>
<label for="two">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="radio" id="three" name="dan"/>
<label for="three">記住密碼</label>
</div>
<p>第二組單選</p>
<div class="checkbox-group">
<input type="radio" id="one2" name="dan2"/>
<label for="one2">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="radio" id="two2" name="dan2"/>
<label for="two2">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="radio" id="three2" name="dan2"/>
<label for="three2">記住密碼</label>
</div>
<p>第一組複選</p>
<div class="checkbox-group">
<input type="checkbox" id="one3" name="fu"/>
<label for="one3">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="two3" name="fu"/>
<label for="two3">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="three3" name="fu"/>
<label for="three3">記住密碼</label>
</div>
<p>第二組複選</p>
<div class="checkbox-group">
<input type="checkbox" id="one4" name="fu2"/>
<label for="one4">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="two4" name="fu2"/>
<label for="two4">記住密碼</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="three4" name="fu2"/>
<label for="three4">記住密碼</label>
</div>
</div>
<div style="border:5px solid blue;">
<p style="font-size:20px">使用背景圖片寫法：</p>
<p>第一組單選</p>
<div class="xuan-group">
<input type="radio" id="radioOne" name="picRadio"/>
<label for="radioOne">勾選</label>
</div>
<div class="xuan-group">
<input type="radio" id="radioTwo" name="picRadio"/>
<label for="radioTwo">勾選</label>
</div>
<div class="xuan-group">
<input type="radio" id="radioThree" name="picRadio"/>
<label for="radioThree">勾選</label>
</div>
<p>第一組複選</p>
<div class="xuan-group">
<input type="checkbox" id="radioOne2" name="picBox"/>
<label for="radioOne2">勾選</label>
</div>
<div class="xuan-group">
<input type="checkbox" id="radioTwo2" name="picBox"/>
<label for="radioTwo2">勾選</label>
</div>
<div class="xuan-group">
<input type="checkbox" id="radioThree2" name="picBox"/>
<label for="radioThree2">勾選</label>
</div>
</div>
</body>
</html>