js實現動態改變radio狀態

2021-07-25 22:31:24 字數 2744 閱讀 1227

h5的radio是自帶選中狀態改變的,但是如果自帶的狀態無法滿足自己的需求時,就需要自己去實現。**如下

h5部分**

class=

"group"

>

class=

"active"

>

type=

"radio"

name=

"parent_radio"

value=

"1"

id="new_data"

οnclick=

"change()"

/>

最新資料

type=

"radio"

name=

"parent_radio"

value=

"0"

id="my_data"

οnclick=

"change()"

/>

我的資料

name=

"parent_radio"

type=

"radio"

id="screen_data"

value=

"0"

οnclick=

"change()"

/>

分類瀏覽

type=

"radio"

name=

"parent_radio"

value=

"0"

id="history_data"

οnclick=

"change()"

/>

瀏覽歷史

css**

js方法** 

效果如下

這裡實現的是頂部boder的動態顯示隱藏並且這裡radio左側預設的圓形按鈕設為了隱藏。如果想要按鈕不隱藏,需要作如下修改

class=

"group"

>

class=

"active"

>

"images/delate_choose.png"

name=

"image"

>

type=

"radio"

name=

"parent_radio"

value=

"1"

id="new_data"

οnclick=

"change()"

/>

最新資料

"images/delate_no_choose.png"

name=

"image"

>

type=

"radio"

name=

"parent_radio"

value=

"0"

id="my_data"

οnclick=

"change()"

/>

我的資料

"images/delate_no_choose.png"

name=

"image"

>

name=

"parent_radio"

type=

"radio"

id="screen_data"

value=

"0"

οnclick=

"change()"

/>

分類瀏覽

"images/delate_no_choose.png"

name=

"image"

>

type=

"radio"

name=

"parent_radio"

value=

"0"

id="history_data"

οnclick=

"change()"

/>

瀏覽歷史

即在每乙個raido型別的input前面加乙個img(注意選中和未選中的區別),js的change方法做以下修改

varradio = document.getelementsbyname("parent_radio");

varimg = document.getelementsbyname("image");

/*用byname是為了取到所有的radio*/

varradiolength = radio.length

;for(vari = 0

;i < radiolength;i++)

else

}

img的length肯定和radio的length一樣,所以可以只取乙個length。效果如下

由於自己剛學的h5,很多東西不熟練,不敢說自己的方法就是正確方法,只是為了記錄學習過程,所以把學到的一些東西寫在這裡,望大家不吝賜教。

js實現動態改變table高度

左右兩個table,各佔頁面的一半,左邊的table 名字 可能會很長,要求名字全部顯示,所以就要折行顯示。但是折行顯示後高度就會變化,要求右邊的table高度和左邊一樣。而且隨著頁面放大縮小table的高度始終一致。而右邊的table放的是檔名的超連結,要求超過五個檔案就要顯示滾動條。所以右邊是將...

使用JS動態改變元素樣式

今天寫了個小網頁,需要使用js動態改變元素樣式,結果很多麻煩,從網上找了一些解決辦法總算搞定。總結一下 改變樣式有三種辦法,style.stylename style.csstext,和 classname 光文字不好說啊,還是舉栗子吧 假定var mydiv document.getelement...

js動態改變iframe高度自適應

先建立乙個全域性方法用於實現iframe高度自適應 jquery.initifram function dom 然後在iframe的onload事件中呼叫這個方法 onload initifram this 如果在iframe載入完畢之後,又通過js動態的新增了dom元素那麼還是會在iframe中出...