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

2021-08-09 09:56:06 字數 1919 閱讀 3266

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 ...