ホームページ >ウェブフロントエンド >ライユイのチュートリアル >lauiui がチェックボックスの値を取得する方法とチェックボックスに値を割り当てる方法

lauiui がチェックボックスの値を取得する方法とチェックボックスに値を割り当てる方法

王林
王林転載
2020-11-19 15:32:496892ブラウズ

lauiui がチェックボックスの値を取得する方法とチェックボックスに値を割り当てる方法

チェック ボックスの値を取得します:

(学習ビデオ共有: javascript ビデオ チュートリアル)

1. 取得します。 layui 単一のチェックボックスの値

=========================================HTML=============================================
<div class="layui-form-item">
   <div class="layui-col-md12">
         <div>
               <label class="layui-form-label">类型</label>
               <div class="layui-input-block">
                    <input type="checkbox" name="AllDay" id="AllDay" lay-filter="test1" value="全天" title="全天">
                    <input type="checkbox" name="IsEnd" id="IsEnd" lay-filter="test1" value="结束时间" title="结束时间">
               </div>
         </div>
        <span></span>
   </div>
</div>

========================================JS=============================================
var allDayCheck = document.getElementById("AllDay").checked;
var isEndCheck = document.getElementById("IsEnd").checked;

2. Layui は複数のチェックボックスの値を取得し、バックグラウンドに集中的に送信します

//HTML代码

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like" value="1" title="写作">
            <input type="checkbox" name="like" value="2" title="阅读" >
            <input type="checkbox" name="like" value="3" title="发呆">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

 

//JS代码

<script>
    layui.use(&#39;form&#39;, function(){
        var form = layui.form;
        form.on(&#39;submit(formDemo)&#39;, function(data){

            //获取checkbox[name=&#39;like&#39;]的值
            var arr = new Array();
            $("input:checkbox[name=&#39;like&#39;]:checked").each(function(i){
                arr[i] = $(this).val();
            });
            data.field.like = arr.join(",");//将数组合并成字符串

            $.post("admin.php", {data:data.field}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        location.href = res.url;
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            }, &#39;json&#39;);

            return false;
        });
    });
</script>

では、値を割り当てる方法を説明します。レイウイのチェックボックスに?

 layui.use(&#39;form&#39;, function () {
     form = layui.form;
     $(&#39;#AllDay&#39;).prop("checked", true); //先进行基本赋值                          
     form.render(); //这句必须(用来更新渲染页面)
});

推奨チュートリアル: layui

以上がlauiui がチェックボックスの値を取得する方法とチェックボックスに値を割り当てる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。