精华内容
下载资源
问答
  • 什么标签用于在表单中构建复选框_HTML表单复选框标签
    千次阅读
    2021-06-14 06:07:14

    HTML表单复选框标签

    在HTML的表单控件中,复选框也是经常使用的控件,它可以让用户选择打勾或不打勾。它使用的也是标签。

    一、定义

    标签用于表示文本框、密码框、单选框、复选框、文件上传框、普通按钮、提交按钮、重置按钮等。它是根据不同的type属性值来判断各种不同的类型的子控件的。作为复选框使用时,type属性的值为“checkbox”。

    二、语法

    选项1

    说明:这里声明了一个复选框表单控件,名称为“checkbox1”。这组复选框的内容为“选项1”,选项对应的值为“value1”。所谓复选框。

    三、属性

    标签作为复选按钮来讲,主要有type、name、value、checked等几个重要属性,下面一一解释。

    type属性:

    不同的type类型,将标签标记不同的控件,值为checkbox时表示复选框。

    name属性:

    用于标记此标签的名称,在JavaScript中,可以很方便的通过标签的name属性来找到这个表单,并进一步通过子控件标签的名称,从而找到下面的控件对象。从而就可以做出“您必须要同意我们的注册协议”这样的判断。

    value属性:

    对于复选框来说,value属性的值即为当前选项被选中之后,标签的值。

    checked属性:

    这个是一个孤立的属性,没有值。如果非要给它加个值,那就是它自己。如:

    四、注意

    1、对于一个复选按钮,用户可以选择打勾或不打勾。

    更多相关内容
  • 方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , title: '用户列表' , page: true //开启分页 , cols: [[ {type:'...
  • 判断单选框或复选框是否选中</title> </head> <body> <input name=”radio1″ type=”radio” value=”test”> <button onClick=”alert(‘单选项’+(document....
  • 复选框的name属性

    千次阅读 2018-11-12 13:04:46
    HTML表单中,一组单选按钮(radio)或是一组复选框(checkbox)其中的name都是一样的。...一组复选框(checkbox):一般将name设置为name[],如果被选中,则在数组name中添加一个元素,在处理页面将如下获...

    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 />';
      }
    }

     

    展开全文
  • 复选框属性设置,属性获取

    千次阅读 2018-07-18 19:58:31
    input type="checkbox" id="selectAllproduct" style="margin:8px" onclick="selectAll(this)"&gt; Jquery:  function selectAll(a){ var type = a.checked; //选中...

    (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获取复选框

    千次阅读 2019-01-27 14:23:35
    layui获取复选框 //HTML代码 &lt;form class="layui-form"&gt;  &lt;div class="layui-form-item"&gt;  &lt;label class="layui-form-label"&gt;复选...

    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 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • 如何获取所有复选框:document.getElementsByName、 需求分析 ​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理 技术分析 第一种方法:选择器[属性名称=’属性值’] $(“input[type=’checkbox’]:...
  • layui动态生成复选框并向后端传递选中复选框
  • js获取复选框的value

    2019-09-09 09:34:55
    思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中)。 html部分: <div class="category"> <span>所属产品线</span> <div> <ul&...
  • type属性值

    千次阅读 2020-09-10 09:52:35
    checkbox:复选框,同一组的单选按钮必须要有相同的name。 button:普通按钮。 submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。 reset:重置按钮,会重置当前表单中全部的内容。 image:图像...
  • 复选框 全选 以及 获取所有选中的 总结一下 jsp中获取 数据 Map,List> map = (Map,List>)Function.getAttribute(request, "mapList"); List[]> lsUser = map.get("lsUser"); %> 循环 集合 追加 复选框 ...
  • 属性说明Name复选框控件的名称Alignment设置标题文本的对齐方式, 取值为: 0 左对齐 1 右对齐Appearance是否用立体效果绘制,取值为: 0 平面 1 3D(立体)BackColor设置背景颜色,可从弹出的调色板选择。Caption复选框...
  • [复选框] 获取checkbox选中的

    千次阅读 2018-11-07 17:10:11
    版权声明 本博文首发于: ... 请注意: 无需授权即可转载; 甚至无需保留以上版权声明… … ...文章目录一、情景二、代码1、html代码2、javascript3、总结三、网上摘选代码...我想获取复选框下处于选中状态下的 ,该复...
  • 复选框checkBox取值的三种方法

    千次阅读 2020-09-29 20:41:56
    <head> <meta charset="UTF-8"> <title>checkBox</title> <!--引入jquery文件-->...script type="text/javascript"src="jquery-1.8.3.min.js">...//获取复选框参数方法. 第一种 ...
  • 本文实例讲述了jQuery将所有被选中的checkbox某个属性值连接成字符串的方法。分享给大家供大家参考。具体如下: 需求: 对于一组checkbox,当点击每个checkbox后,把当前处于选中状态的checkbox的某个属性值取出来...
  • HTML表单复选框标签

    千次阅读 2020-12-21 02:29:13
    HTML表单复选框标签在HTML的表单控件...它是根据不同的type属性值来判断各种不同的类型的子控件的。作为复选框使用时,type属性的值为“checkbox”。二、语法选项1说明:这里声明了一个复选框表单控件,名称为“chec...
  • 复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了...
  • WPF选中复选框改变属性

    千次阅读 2019-07-26 09:18:48
    Trigger触发器:既当某些条件满足时会触发一个行为(比如某些的 变化或动画的发生变化等)。触发器还比较像事件。事件一般是由用户操作触发的,而触发器除了有事件触发型的EventTrigger外还有数据变化触发行的...
  • layui表格数据复选框回显设置方法

    千次阅读 2020-12-19 10:32:44
    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现:我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。layui这里有一个坑,设置...
  • 18、HTML复选框checkbox

    2020-10-30 10:36:15
    正常情况下,单选按钮只能实现选中一个的效果。例如爱好字段,这时用户想选择多个,就不能再使用单选按钮了,可以使用 HTML 中的复选框。...1. 复选框的常用属性 复选框的常用属性: checked ----用来规定在页面加载时
  • js 获取复选框选中的

    千次阅读 2018-08-08 17:57:07
    思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中)。 1、HTML结构 &lt;input type="checkbox" name="test" value="1"/&...
  • 在table表格向后端传递勾选数据的时候,难免有时间后,点击当前行的时候,需要知道当前行的checkbox状态,进行一些其他的操作,但是element-ui没有提供,对应的直接api属性 这里我要对select的API方法进行处理,...
  • html中标签用法解析及如何设置checkbox复选框的默认选中状态(由www.169it.com搜集整理)html中复选框Checkbox对象代表一个 HTML 表单中的 一个选择框。html中复选框Checkbox对象的属性属性 描述accessKey 设置或返回...
  • 应用场景:我们有时候需要获取到单选框或者是复选框选中的那个,得到它的value,传送到后端进行数据的添加,修改,或者是删除。 单选框获取方法 我们只需要定义一个方法,将我们需要获取的单选框的value传递进去...
  • JS获取复选框被选中的

    万次阅读 2018-06-19 14:52:14
    &lt;head&gt; &lt;script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;...input type=radio v
  • 关于 checkbox复选框的详细属性 操作

    千次阅读 2019-10-28 11:12:20
    $(’#ipRank’).prop(‘checked’); //获取checkbox选中状态 $("#tableid input[type=‘checkbox’]:checked").each(function(){ var va = $(this).val();//当前选中的复选框 });
  • 本篇文章主要给大家介绍HTML怎么设置复选框以及单选框的。 我们在网站开发过程中,有时会需要实现类似调查问卷的功能,那么既然是问卷,就避免不了单选或者多选的情况。对于新手朋友来说,或许不太清楚。 下面我们就...
  • 修改复选框样式

    千次阅读 2018-02-06 11:38:40
    使用渐进增强的方式美化复选框样式 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态 未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计...
  • &lt;el-table @selection-change="...el-table-column type="selection"&gt; &lt;/el-table-column&gt; &lt;/el-table&gt; &lt;script&gt; data () { return {
  • html的单选框与复选框

    千次阅读 2017-06-19 12:20:30
    使用语法:<input type="radio/checkbox" value...当 type=”checkbox” 时,控件为复选框2、value:提交数据到服务器的(给后台程序PHP使用)3、name:为控件命名,给ASP、PHP等后台程序使用 4、checked:当设置 che

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,493
精华内容 24,597
关键字:

复选框的type属性值是