CSS-以复选框代替单选框的样式问题

项目合作 项目合作 主题:1030 回复:2135

CSS-以复选框代替单选框的样式问题

灵芸 发布于 2017-07-27 字数 127 浏览 1196 回复 2

我想做的是 2个单选按钮,而它的样式不是圆形的,是用复选框的矩形框,点上打钩,请问我该怎么做,有没有例子啊,求教,万分感谢

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

浮生未歇 2017-10-09 2 楼

为什么一定要用单选按钮实现checkbox呢,如果只是为了以复选框的形式来展示单选,那么你完全可以用JavaScript来控制选中了其中一个另外一个不能选呀!

 <html>
<head>
<meta charset="UTF-8">
<title>checkbox模拟radio</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function(){
$('form input[type=checkbox]').click(function(){
var checkboxs = $('form input[type=checkbox]');
checkboxs.each(function(i){
$(this).attr('checked', false);
});
$(this).attr('checked', true);
});
});
</script>
</head>
<body>
<form name="form1" id="form" method="post" action="">
<input type="checkbox" name="a" />
<input type="checkbox" name="b" />
</form>
</body>
</html>

虐人心 2017-09-26 1 楼

那就用复选框来代替单选按钮,用js来控制单选:

html :

<input type="checkbox" name='test[]' />
<input type="checkbox" name="test[]" />
<input type="checkbox" name="test[]" />

使name为test[]的复选框实现单选效果:

//使用jquery
$(':input[name="test[]"]').click(function(){
$(':input[name="test[]"]').prop('checked',false);
$(this).prop('checked',true);
})

或者:

 var box = document.getElementsByName('test[]');
for(var i=0;i<box.length;i++) {
box[i].onclick=function(){
for(var i=0;i<box.length;i++){
box[i].checked = false;
}
this.checked = true;
}
}