Heim >Web-Frontend >Layui-Tutorial >Wie Laui den Wert des Kontrollkästchens erhält und wie man dem Kontrollkästchen einen Wert zuweist

Wie Laui den Wert des Kontrollkästchens erhält und wie man dem Kontrollkästchen einen Wert zuweist

王林
王林nach vorne
2020-11-19 15:32:496868Durchsuche

Wie Laui den Wert des Kontrollkästchens erhält und wie man dem Kontrollkästchen einen Wert zuweist

Ermitteln Sie den Wert des Kontrollkästchens:

(Teilen von Lernvideos: Javascript-Video-Tutorial)

1. Layui erhält den Wert eines einzelnen Kontrollkästchens

=========================================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 erhält den Wert mehrerer Häkchen Kästchen hinzufügen und zentral an den Hintergrund übergeben

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

Wie kann man also dem Laui-Kontrollkästchen einen Wert zuweisen?

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

Empfohlenes Tutorial: layui

Das obige ist der detaillierte Inhalt vonWie Laui den Wert des Kontrollkästchens erhält und wie man dem Kontrollkästchen einen Wert zuweist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen