input标签radio、checkbox、text、password等类型的属性区分与混合使用

input标签各种类型的使用小技巧

开发工具与关键技术：VisualStudio C#
作者：老龙
撰写时间：2019/5/24

下面时小编自己总结的一些关于input标签的属性于技巧，希望对大家的开发有所帮助。
一、单选框
当input标签的类型为radio时就有了单选框的功能，这个功能在表单里常用于判断性别。

1. 用于判断性别这类两种类型的选项时name设为Sex，当要判断多种类型时name可以设为exampleRadios。
2. 当name的值不设置时input标签就没有了单选框的功能，点击多少个类型为radio的input标签就会勾选中多少个，并不会把之前勾选到的去掉。

 <div>
        男<input type="radio" name="sex" />
    </div>
    <div>
        女<input type="radio" name="sex" />
    </div>
    <div>
        成人<input type="radio" name="exampleRadio" />
    </div>
    <div>
        儿童<input type="radio" name="exampleRadio" />
    </div>
    <div>
        婴儿<input type="radio" name="exampleRadio" />
    </div>
    <div>
        ？<input type="radio" name="" />
    </div>
    <div>
        ？<input type="radio" name="" />
    </div>

3.当需要点击单个类型为radio的input标签实现选中与取消时，jquery的写法为

$("#radio ").click(function () {
            var thisblock = $( this ).hasClass("thisblock");
            if (!thisblock) {
                $(" this ").addClass("thisblock");
            }
            else {
                $( this).removeClass("thisblock");
                $( this).prop("checked",false);
            }
        })

Thisblock是一个空类，里面没有任何的样式，他的作用只是用于用于第二次点击单选框时让单选框取消选中。Prop是获取在匹配的元素集中的第一个元素的属性值。由于单选框点击时自带选中的功能，所以我们不需要设置它有thisblock这个类时让它选中。

二、复选框
1.复选框用于勾选多条数据，当多条数据需要删除时常用到它。当我们需要点击一个复选框然后让所有的复选框都选中时，jquery的代码为：（abc为空类，作用仅仅是记录点击的状态）

在这里插入代码片 <div>
        <input type="checkbox" name="" id="checkAll" />全选
    </div>
    <div>
        <input type="checkbox" name="" />
    </div>
    <div>
        <input type="checkbox" name="" />
    </div>
    <div>
        <input type="checkbox" name="" />
    </div>
    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#checkAll").click(function () {
                var check = $(this).hasClass("abc");
                if (!check) {
                    $(this).addClass("abc");
                    $("input[type='checkbox']").prop("checked", true);
                }
                else {
                    $(this).removeClass("abc");
                   $("input[type='checkbox']").prop("checked", false);
                }
            });
        })
    </script>

三、输入框
当类型为text时仅仅用于输入文本内容，它常用于form表单中。当我们需要这个输入框的内容是只读而不可修改时，我们可以把输入框给禁用掉，jQuery代码为

	<div>
        <input type="text" name="exampleRadio" id="disabled" value="齐天大圣孙悟空" />
    </div>

    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#disabled").prop("disabled",true);
        })
    </script>

另外输入框还有一个属性为autocomplete，它决定是否记录输入历史，off不记录，on记录，输入框默认为on

四、密码框
这个属性的类型于text很相似，同样时在输入框里输入内容，不过输入的内容是不可视的，输入的内容会被”.”或者”*”等字符掩盖掉，所以他都是作为密码框来使用。被掩盖掉的字符即使你复制后在别的软件粘贴出来也是不可视的，他会被其他的内容覆盖掉。

五、重置框
当input标签为这个类型时主要用于form内容的清空，当点击到这个标签时，它会把它父级的form表单内容全部清空。包括单选框、复选框的勾选，输入框、密码框输入的内容。清空form表单的jquery代码为

<form action="/" method="post" id="empty">
        <input type="reset" name=""/>
        <input type="text" />
        <input type="radio" />
        <input type="checkbox" />
        <input type="password" />
    </form>
    
    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#empty input[type='reset']").click();
        })
    </script>

因为在页面上不需要它显示出来，所以它常常和hidden这个属性一起使用。当添加hidden这个属性时在页面上整个标签都会隐藏。