四 MUI 核取方塊 單選框 使用js獲取選擇值

2021-07-30 05:57:09 字數 1916 閱讀 2939

1、核取方塊

checkbox常用於多選的情況,比如批量刪除、新增等;

dom結構

class

="mui-input-row mui-checkbox"

>

checkbox示例

name

="checkbox1"

value

="item 1"

type

="checkbox"

checked

>

預設checkbox在右側顯示,若希望在左側顯示,只需增加.mui-left類即可,如下:

class

="mui-input-row mui-checkbox mui-left"

>

checkbox左側顯示示例

name

="checkbox1"

value

="item 1"

type

="checkbox"

>

若要禁用checkbox,只需在checkbox上增加disabled屬性即可;

2、單選框

radio用於單選的情況

dom結構

class

="mui-input-row mui-radio"

>

radio

name

="radio1"

type

="radio"

>

預設radio在右側顯示,若希望在左側顯示,只需增加.mui-left類即可,如下:

class

="mui-input-row mui-radio mui-left"

>

radio

name

="radio1"

type

="radio"

>

若要禁用radio,只需在radio上增加disabled屬性即可;

mui基於列表控制項,提供了列表式單選實現;在列表根節點上增加.mui-table-view-radio類即可,若要預設選中某項,只需要在對應li節點上增加.mui-selected類即可,dom結構如下:

列表式單選在切換選中項時會觸發selected事件,在事件引數(e.detail.el)中可以獲得當前選中的dom節點,如下**列印當前選中項的innerhtml:

var

list

=document

.queryselector

('.mui-table-view.mui-table-view-radio'

);list

.addeventlistener

('selected'

,function(e

));

3、js獲取單選按鈕的值

function

getvals

()mui

.toast

(res);}

function

getradiores

(classname)}

return

checkval;}

script

>

4、js獲取核取方塊的值

function

getvals

()mui

.toast

(res);}

function

getcheckboxres

(classname)}

return

checkval

;}

mui 核取方塊 單選框 使用js獲取選擇值

1 核取方塊 checkbox常用於多選的情況,比如批量刪除 新增等 dom結構 class mui input row mui checkbox checkbox示例 name checkbox1 value item 1 type checkbox checked 預設checkbox在右側顯示...

單選框核取方塊取值

query radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關設定 獲取一組radio被選中項的值 var item input name items checked val 獲取select被選中項的文字 var item se...

單選框和核取方塊的應用

在用表單設計調查表時,為了減少使用者的操作,使用選擇框是乙個好主意,在html的標記中有兩種選擇框,即單選框和核取方塊,兩者的區別是單選框中的選項使用者只能選擇一項,而核取方塊中的選項使用者可以任意選擇多項,甚至全選。請看下面的例子 下面給出這個例子的源 結合 來講各引數的設定 form name ...