本文主要和大家分享JS實現checkBoxd的單選效果,簡單說就是遍歷所有的checkBox復選框,如果有一個已經選中,就將其他的checkBox框置為未選中,以此實現單選的效果,我看到很多博客也寫了類似的功能,但大部分都是基于jquery實現的,我這里是原生js實現此功能。
直接貼代碼,如下:
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table cellpadding="10" cellspacing="1" width="70%" border="1" align="center"> <tr > <td align="center"> 個人稅收居民身份聲明</td> </tr> <tr > <td>本人聲明:</td> </tr> <tr > <td> <input type="checkBox" name="statement" id="1" onclick="selectCheckOne(this)">1.聲明1 </td> </tr> <tr > <td> <input type="checkBox" name="statement" id="2" onclick="selectCheckOne(this)">2.聲明2</td> </tr> <tr > <td> <input type="checkBox" name="statement" id="3" onclick="selectCheckOne(this)">3.聲明3</td> </tr> </table> </body> <script> function selectCheckOne(obj){ var checks = document.getElementsByName("statement"); if(obj.checked){ for( var i=0;i<checks.length;i++){ checks[i].checked=false; } obj.checked=true; }else{ for( var i=0;i<checks.length;i++){ checks[i].checked=false; } } } </script> </html>
相關推薦:
input:checkbox多選框實現單選效果跟radio一樣
javascript實現鏈接單選效果的方法_javascript技巧
ReactJS中表單的單選多選與反選的實現方法
以上就是JS實現checkBox的單選效果實例代碼的詳細內容,更多請關注php中文網其它相關文章!