Home > Article > Web Front-end > CSS多选框样式问题！_html/css_WEB-ITnose
CSS多选框样式问题！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:11:401268browse
这种多选样式怎么实现?
要保证选中后再次点击能取消，还有后台能获得相应的ID。
回复讨论(解决方案)
点击增加/取消选中样式
获取选中的项拼接起来发送到后台，格式自定义
表面做成一个div的样子，其实隐藏一个checkbox，点div时改变样式，同时改变checkbox的值为选中状态。
下面给出一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-1.8.3.min.js"></script><style> .chk{height:22px; background:#f6f6f6;float:left; margin-left:5px; line-height:22px; vertical-align:middle;overflow:hidden; text-align:center;padding:0px 10px 0px 10px;border:1px solid #C99;font-size:12px;cursor:pointer} .act{color:#F96;background:#fff;} .chk input{ visibility:hidden; margin-left:-12px;}</style></head><body><form id="form1" name="form1" method="post" action=""> <div class="chk"><input type="checkbox" name="checkbox" value="0"/>西安</div> <div class="chk"><input type="checkbox" name="checkbox" value="1"/>桂林</div> <div class="chk"><input name="checkbox" type="checkbox" value="2"/>北京</div></form></body></html><script>$(function(){ $(".chk").click(function(){ if($(this).find("input[name='checkbox']").attr("checked")!="checked"){ $(this).addClass("act"); $(this).find("input[name='checkbox']").attr("checked","checked"); }else{ $(this).removeClass("act"); $(this).find("input[name='checkbox']").removeAttr("checked"); } }) })</script> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：基于css3的鼠标滑动按钮动画之CSS续_html/css_WEB-ITnoseNext article：HTML5源生时间控件显示异常_html/css_WEB-ITnose