Rumah hujung hadapan web Tutorial Layui layui如何获取复选框的值以及如何为复选框赋值

layui如何获取复选框的值以及如何为复选框赋值

Nov 19, 2020 pm 03:32 PM
layui kotak semak

layui如何获取复选框的值以及如何为复选框赋值

获取复选框的值:

(学习视频分享:javascript视频教程

一、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;
Salin selepas log masuk

二、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>
Salin selepas log masuk

那么怎么给layui复选框赋值呢?

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

推荐教程:layui

Atas ialah kandungan terperinci layui如何获取复选框的值以及如何为复选框赋值. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyediakan lompat pada halaman log masuk layui Bagaimana untuk menyediakan lompat pada halaman log masuk layui Apr 04, 2024 am 03:12 AM

Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.

Bagaimana untuk mendapatkan data borang dalam layui Bagaimana untuk mendapatkan data borang dalam layui Apr 04, 2024 am 03:39 AM

layui menyediakan pelbagai kaedah untuk mendapatkan data borang, termasuk mendapatkan terus semua data medan borang, mendapatkan nilai elemen bentuk tunggal, menggunakan kaedah formAPI.getVal() untuk mendapatkan nilai medan yang ditentukan, menyerikan data borang dan menggunakannya sebagai parameter permintaan AJAX, dan mendengar acara penyerahan Borang mendapat data.

Gunakan jQuery untuk melaksanakan kemas kini masa nyata status pilihan kotak pilihan Gunakan jQuery untuk melaksanakan kemas kini masa nyata status pilihan kotak pilihan Feb 23, 2024 pm 03:45 PM

Menggunakan jQuery untuk Kemas Kini Masa Nyata Status Pilihan Kotak Semak Dalam pembangunan web, kita sering menghadapi situasi di mana kita perlu mengemas kini status kotak semak yang dipilih dalam masa nyata. Dengan menggunakan jQuery, kami boleh melaksanakan fungsi mengemas kini status pilihan kotak semak dengan mudah dalam masa nyata. Berikut ialah cara menggunakan jQuery untuk menyelesaikan tugas ini. Pertama, kita perlu menyediakan struktur HTML ringkas yang mengandungi berbilang kotak pilihan:

Bagaimana layui melaksanakan penyesuaian diri Bagaimana layui melaksanakan penyesuaian diri Apr 26, 2024 am 03:00 AM

Susun atur suai boleh dicapai dengan menggunakan fungsi susun atur responsif rangka kerja layui. Langkah-langkahnya termasuk: merujuk rangka kerja layui. Tentukan bekas susun atur penyesuaian dan tetapkan kelas bekas layui. Gunakan titik putus responsif (xs/sm/md/lg) untuk menyembunyikan elemen di bawah titik putus tertentu. Tentukan lebar elemen menggunakan sistem grid (layui-col-). Cipta jarak melalui offset (layui-offset-). Gunakan utiliti responsif (layui-invisible/show/block/inline) untuk mengawal keterlihatan elemen dan cara ia muncul.

Bagaimana untuk memindahkan data dalam layui Bagaimana untuk memindahkan data dalam layui Apr 26, 2024 am 03:39 AM

Kaedah menggunakan layui untuk menghantar data adalah seperti berikut: Gunakan Ajax: Cipta objek permintaan, tetapkan parameter permintaan (URL, kaedah, data), dan proses respons. Gunakan kaedah terbina dalam: Permudahkan pemindahan data menggunakan kaedah terbina dalam seperti $.post, $.get, $.postJSON atau $.getJSON.

Apakah perbezaan antara layui dan vue? Apakah perbezaan antara layui dan vue? Apr 04, 2024 am 03:54 AM

Perbezaan antara layui dan Vue terutamanya ditunjukkan dalam fungsi dan kebimbangan. Layui memfokuskan pada pembangunan pesat elemen UI dan menyediakan komponen pasang siap untuk memudahkan pembinaan halaman manakala Vue ialah rangka kerja tindanan penuh yang memfokuskan pada pengikatan data, pembangunan komponen dan pengurusan keadaan, dan lebih sesuai untuk membina aplikasi yang kompleks. Layui mudah dipelajari dan sesuai untuk membina halaman dengan cepat; Vue mempunyai keluk pembelajaran yang curam tetapi membantu membina aplikasi berskala dan mudah diselenggara. Bergantung pada keperluan projek dan tahap kemahiran pembangun, rangka kerja yang sesuai boleh dipilih.

Bagaimana untuk menjalankan layui Bagaimana untuk menjalankan layui Apr 04, 2024 am 03:42 AM

Untuk menjalankan layui, lakukan langkah-langkah berikut: 1. Import skrip layui 3. Gunakan komponen layui 4. Import gaya layui (pilihan); Dengan langkah ini, anda boleh membina aplikasi web menggunakan kuasa layui.

Apakah maksud layui? Apakah maksud layui? Apr 04, 2024 am 04:33 AM

layui ialah rangka kerja UI bahagian hadapan yang menyediakan pelbagai komponen, alatan dan fungsi UI untuk membantu pembangun membina aplikasi web moden, responsif dan interaktif dengan cepat penyesuaian. Ia digunakan secara meluas dalam pembangunan pelbagai aplikasi web, termasuk sistem pengurusan, platform e-dagang, sistem pengurusan kandungan, rangkaian sosial dan aplikasi mudah alih.

See all articles