chckbox 实现单选效果（html）

r囧r小猫 2022-08-06 12:24 131阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:698px; color:rgb(0,0,0); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:14px; line-height:25.2000007629395px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word">&nbsp; &nbsp;&nbsp; &nbsp; note：在html &lt;input&gt; 标签类中的checkbox实现单选效果。 &nbsp; &nbsp;&nbsp; &nbsp; 在最近的开发项目中，客户要求使用小方格子实现“单选”功能，显然圆点的radio被out了，只能选择chckbox的方块样式，也在网上搜过，可能有点儿脑残，没有找到。 &nbsp; &nbsp;&nbsp; &nbsp; 废话不多说直接上代码： 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:5px 10px; color:rgb(102,102,102); background:rgb(247,247,247)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;!DOCTYPE html&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;head&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;title&gt;checkbox实现单选效果&lt;/title&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;script&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;$(document).ready(function () {&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;$('.sb').click(function () {&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; var typeThis = typeof ($(this).attr("checked"));&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; switch (typeThis) {&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;case "string":&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;if ($(this).attr("checked").toLowerCase()=="checked") {&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; $('.sb').each(function () {&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;$(this).removeAttr("checked");&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; });&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; $(this).attr("checked",true);&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;break;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;case "undefined":&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;$('.sb').each(function () {&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; $(this).removeAttr("checked");&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;});&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;break;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; }&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;});&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;});&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;/script&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/head&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;body&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;input class="sb" type="checkbox" value="1"/&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;input class="sb" type="checkbox" value="2" /&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;input class="sb" type="checkbox" value="3" /&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&nbsp; &nbsp; &lt;input class="sb" type="checkbox" value="4" /&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/body&gt;&nbsp;&nbsp; </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px">&lt;/html&gt;</li> 
 </ol> 
 </div> 
 </div> </td> 
 </tr> 
 </tbody> 
</table>