您好,登錄后才能下訂單哦!
小編給大家分享一下js如何實現(xiàn)動態(tài)改變radio狀態(tài),希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
JS是JavaScript的簡稱,它是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,主要用于web的開發(fā),可以給網(wǎng)站添加各種各樣的動態(tài)效果,讓網(wǎng)頁更加美觀。
h6的radio是自帶選中狀態(tài)改變的,但是如果自帶的狀態(tài)無法滿足自己的需求時,就需要自己去實現(xiàn)。
代碼如下:
h6部分代碼
<p class="group"> <label class="active"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/> 最新資料</label> <label> <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/> 我的資料</label> <label> <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/> 分類瀏覽</label> <label> <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/> 瀏覽歷史</label> </p>
CSS代碼
<style> input[type="radio"] { /*取消自帶按鈕*/ color:gray; display: none; } .group>label:hover{ /*鼠標(biāo)移到控件上做的改變*/ background-color: cornflowerblue; } .group>label{ /*未選中狀態(tài)*/ float: left; color: #4A4A4A; font-size: 16px; padding: 10px 11px; } .group>label.active{ /*選中狀態(tài)*/ color: #316CEB; font-size: 16px; border-top: 2px solid #316CEB; padding: 10px 11px; } </style>
JS方法代碼
<script type = "text/javascript"> function change() { var radio = document.getElementsByName("parent_radio"); /*用ByName是為了取到所有的radio*/ var radioLength = radio.length; for(var i = 0;i < radioLength;i++) { if(radio[i].checked) { radio[i].parentNode.setAttribute('class', 'active'); }else { radio[i].parentNode.setAttribute('class', ''); } } } </script>
效果如下
這里實現(xiàn)的是頂部boder的動態(tài)顯示隱藏并且這里radio左側(cè)默認(rèn)的圓形按鈕設(shè)為了隱藏。如果想要按鈕不隱藏,需要作如下修改
<p class="group"> <label class="active"><img src="images/delate_choose.png" name="image"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/> 最新資料</label> <label> <img src="images/delate_no_choose.png" name="image"> <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/> 我的資料</label> <label> <img src="images/delate_no_choose.png" name="image"> <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/> 分類瀏覽</label> <label> <img src="images/delate_no_choose.png" name="image"> <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/> 瀏覽歷史</label> </p>
即在每一個raido類型的input前面加一個img(注意選中和未選中的區(qū)別),JS的change方法做以下修改
var radio = document.getElementsByName("parent_radio"); var img = document.getElementsByName("image"); /*用ByName是為了取到所有的radio*/ var radioLength = radio.length; for(var i = 0;i < radioLength;i++) { if(radio[i].checked) { img[i].src = "images/delate_choose.png"; radio[i].parentNode.setAttribute('class', 'active'); }else { img[i].src = "images/delate_no_choose.png"; radio[i].parentNode.setAttribute('class', ''); } }
img的length肯定和radio的length一樣,所以可以只取一個length。
效果如下:
由于自己剛學(xué)的h6,很多東西不熟練,不敢說自己的方法就是正確方法,只是為了記錄學(xué)習(xí)過程,所以把學(xué)到的一些東西寫在這里,望大家不吝賜教。
看完了這篇文章,相信你對“js如何實現(xiàn)動態(tài)改變radio狀態(tài)”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。