Heim > Artikel > Web-Frontend > CSS多选框样式问题！_html/css_WEB-ITnose
CSS多选框样式问题！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:11:401234Durchsuche
这种多选样式怎么实现?
要保证选中后再次点击能取消，还有后台能获得相应的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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：基于css3的鼠标滑动按钮动画之CSS续_html/css_WEB-ITnoseNächster Artikel：HTML5源生时间控件显示异常_html/css_WEB-ITnose