layuiradio選中詳解

一、layuiradio選中的值

layuiradio組件是layui官方推出的單選框組件，可以用來表達單選的情況。layuiradio選中事件的觸發方式有兩種：一種是頁面渲染時就選中，另一種是用戶在頁面操作後選中。

當頁面渲染時需要選中某個layuiradio，只需要在html中給對應的radio元素添加checked=""屬性即可。例如：

<input type="radio" name="sex" title="男" checked="">
<input type="radio" name="sex" title="女">

上面的代碼中，男性單選框在頁面渲染時就被選中了。

而當用戶在頁面操作後選中了某個layuiradio，那麼我們可以在其onchange事件中獲取到選中的值。

<script>
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('radio(sex)', function(data){
            console.log(data.value); //被點擊的radio的value值
        });
    });
</script>

上面的代碼實現了當name為’sex’的radio元素被點擊時，在控制台輸出該元素的值。

二、layui複選框被選中事件

layuiradio的實現是基於layui.form組件的，而layui.form組件還包括了一些其他的表單元素類型，例如複選框checkbox。我們同樣可以在複選框選中時實現事件的觸發。

複選框的選中事件需要在頁面中渲染時預先定義。下面的示例演示了在複選框被選中時，將選中的複選框的value值輸出到控制台中。

<script>
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('checkbox(like)', function(data){
            console.log(data.value); //被點擊的checkbox的value值
        });
    });
</script>

三、layui多選框選中事件

與複選框不同，layuiradio不支持多選，但是layui.form組件提供了專門的多選框組件select。在選中時，我們同樣可以實現事件的觸發。

多選框的選中事件也需要在頁面中渲染時就預先定義。下面的示例演示了在多選框被選中時，將選中的多選框的值輸出到控制台中。

<script>
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('select(city)', function(data){
            console.log(data.value); //被選擇的option的value值
        });
    });
</script>

上面的代碼中，選項框的選擇事件被定義為了’city’，但在html中還需要給對應的select元素添加lay-filter="city"屬性。

四、小結

以上就是layuiradio選中方面的詳細介紹。通過上述示例，我們可以了解到在layuiradio選中時，無論是單選框、複選框還是多選框，都只需要在頁面中定義對應的選中事件即可。同時，我們還可以在這些事件中獲取到選中的值，為之後的邏輯處理提供便利。