HTML表单中，一组单选按钮（radio）或是一组复选框（checkbox）其中的name都是一样的。
这是为了方便在处理页面获取表单传递的值。
一组单选按钮（radio）：因为name属性相同，所以只有一个能被选中，在处理页面就直接获取，如$_GET['name']；
一组复选框（checkbox）：一般将name设置为name[]，如果被选中，则在数组name中添加一个元素，在处理页面将如下获取值:
 

<?php
    foreach ($out as $key => $value) {
	echo "<li>";
	echo "<input id='a".$value['c_id']."' type='checkbox' name='chk_art[]' value='".$value['c_id']."'>";
        echo "<label for='a".$value['c_id']."'>".$value['article_type']."</label>";
	echo "</li>";
    }
?>

使用序列化传递数据

// 表单序列化:此方法用于一般信息字符等可以，但是上传文件不行，上传文件用formdata
		let data = $("form").serialize();

php处理

if(!empty($_POST['chk_art'])){
  for($i=0; $i< count($_POST['chk_art']); $i++){
      echo $array[$i].'<br />';
  }
}

(1)全选

HTML：<input type="checkbox" id="selectAllproduct" style="margin:8px" onclick="selectAll(this)">
Jquery：
      function selectAll(a){
          var type = a.checked;  //选中：type=true; 取消选中：type=false
          $("#mintable input[name='productbox']").each(function() {
              $(this).prop("checked", type); //相关该被选中的内容全部同步选中
          });
      }

(2)获取多个被选中的复选框的值

HTML：以下的input被循环产生，多个input共用一个name="productbox"

<div><input type="checkbox" value="{{value.id}},{{value.name}}" name="productbox" class="productCheckbox">{{value.name}}</div>

Jquery：

function confirm(){
   var productname = $("#productname").val();
   $("#mintable input[name='productbox']").each(function(){
    var obj = $(this);
   if (obj.is(':checked')){
       var id_name = obj[0].value.split(",");
       //id_name = [value.id, value.name]
       //选中的值可取出用于业务逻辑
  document.getElementById("product_div").style.display = "none";
  }

(3)div隐藏属性修改：此处不可用$("#product_div")这个方法获取div对象

HTML：<div id="product_div"></div>

JS：document.getElementById("product_div").style.display = "none";

        document.getElementById("product_div").style.display = "block";

(4)获取复选框属性

<input type="checkbox" id="iszfy" style="margin:8px"/>

var var1 = $("#iszfy").prop("checked")

var var2 = $("#iszfy").is(":checked")

var var2 = document.getElementById("iszfy").checked

(5)设置复选框属性

<input type="checkbox" id="iszfy" style="margin:8px"/>

$("$iszfy").prop("checked", true);

$("#iszfy").prop("checked", false);

document.getElementById("iszfy").checked = true;

(6)input标签对象获取

<table id = "tbl">

<input type="checkbox" value="1" name="productbox" class="productCheckbox">

<input type="checkbox" value="2" name="productbox" class="productCheckbox">

<input type="checkbox" value="3" name="productbox" class="productCheckbox">

……

</table>

$("#tbl input[name="productbox"] ").each(function(){

            var obj = $(this);

            if (obj.is(":checked")){

                     //业务逻辑

            }

});

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('form', function(){
        var form = layui.form;
        form.on('submit(formDemo)', function(data){

            //获取checkbox[name='like']的值
            var arr = new Array();
            $("input:checkbox[name='like']: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});
                }
            }, 'json');

            return false;
        });
    });
</script>
--------------------- 
作者：奔跑_ 
来源：CSDN 
原文：https://blog.csdn.net/z45283943/article/details/81564475 
版权声明：本文为博主原创文章，转载请附上博文链接！