zoukankan html css js c++ java

JQuery补充——获取与设置表单值

//写jQuery代码时注意前面一定要记得加$(function(){});，在文档加载完成后进行代码的编写

　　使用jQuery的表单对象属性来选择被选中的项：:checked，详见文档选择器部分

　　根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

一、单选框radio

　　1.获取被选中的单选框的value：

var item = $("input[name=hobby][checked]").val();

　//设置则为带参的方法

　　　基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单数据值的操作</title>
    <script src="bootstrapjsjquery.min.js"> </script>
</head>
<body>
    <form action="#">
        <input type="button" id="btn" value="开始测试"><br/>
        <input type="radio" name="hobby" value="eat" />吃饭<br/>
        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>
    </form>
<script type="text/javascript">
    //必须等待文档加载完进行操作！
    $(function(){
        $("#btn").click(function(){
            var item = $("input[name=hobby][checked]").val();
            alert(item);
        });
    });
</script>
</body>
</html>

View Code

　　　2.设置拥有指定value值为选中

$("input[type=radio]").attr("checked",'eat');

　　　　此方式相对直观：

$("input[name=hobby][value=eat]").attr("checked",true);

二、下拉框select

　　1.获取被选中的option的value值

var item = $("select[name=ball] option[selected]").val();

　　　获取里面的文本值：

var item = $("select[name=ball] option[selected]").text();

　　基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单数据值的操作</title>
    <script src="bootstrapjsjquery.min.js"> </script>
</head>
<body>
    <form action="#">
        <!--单选框-->
        <input type="button" id="btn" value="开始测试"><br/>
        <input type="radio" name="hobby" value="eat"/>吃饭<br/>
        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>
        <!--下拉框-->
        <select name="ball">
            <option value="pingpang">乒乓球</option>
            <option value="basketball">篮球</option>
            <option value="baseball" selected>排球</option>
        </select>
    </form>
<script type="text/javascript">
    //必须等待文档加载完进行操作！
    $(function(){
        $("#btn").click(function(){
            /*1.var item = $("input[name=hobby][checked]").val();
            alert(item);
            /*2.$("input[type=radio]").attr("checked",'eat');*/
            /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/
            var item = $("select[name=ball] option[selected]").text();
            alert(item)
        });
    });
    
</script>
</body>
</html>

View Code

　　2.设置指定value值选中

$("select[name=ball]").val("pingpang");

三、输入框（文本框、文本域）

　　1.获取文本框、文本域中的值

var item = $("#username").val();

　　基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单数据值的操作</title>
    <script src="bootstrapjsjquery.min.js"> </script>
</head>
<body>
    <form action="#">
        <!--单选框-->
        <input type="button" id="btn" value="开始测试"><br/>
        <input type="radio" name="hobby" value="eat"/>吃饭<br/>
        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>
        <!--下拉框-->
        <select name="ball">
            <option value="pingpang">乒乓球</option>
            <option value="basketball">篮球</option>
            <option value="baseball" selected>排球</option>
        </select>
        <br/>
        <!--普通文本框-->
        用户名：<input type="text" name="username" id="username"/>
    </form>
<script type="text/javascript">
    //必须等待文档加载完进行操作！
    $(function(){
        $("#btn").click(function(){
            /*1.var item = $("input[name=hobby][checked]").val();
            alert(item);
            /*2.$("input[type=radio]").attr("checked",'eat');*/
            /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/
            /*var item = $("select[name=ball] option[selected]").val();
            alert(item)*/
            /*$("select[name=ball]").val("pingpang");*/
            /*$("select[name=ball] option[text='篮球']").attr("selected",true);*/
            var item = $("#username").val();
            alert(item);
        });
    });
    
</script>
</body>
</html>

View Code

　　2.设置文本框、文本域中的值

$("#username").val("777");

四、复选框checkbox

　　1.设置指定value值的复选框被选中:可以使用prop()，见页首

$("input[name=fruit][value=apple]").attr("checked",true);

//类似单选框

　　　　可以同时使得多个被选中

$("input[name=fruit]").attr("checked",true);

　　基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单数据值的操作</title>
    <script src="bootstrapjsjquery.min.js"> </script>
</head>
<body>
    <form action="#">
        <!--单选框-->
        <input type="button" id="btn" value="开始测试"><br/>
        <input type="radio" name="hobby" value="eat"/>吃饭<br/>
        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>
        <!--下拉框-->
        <select name="ball">
            <option value="pingpang">乒乓球</option>
            <option value="basketball">篮球</option>
            <option value="baseball" selected>排球</option>
        </select>
        <br/>
        <!--普通文本框-->
        用户名：<input type="text" name="username" id="username" /><br>
        <!--复选框-->
        <input type="checkbox" name="fruit" value="apple">苹果
        <input type="checkbox" name="fruit" value="banana">香蕉
        <input type="checkbox" name="fruit" value="orange">橘子
    </form>
<script type="text/javascript">
    //必须等待文档加载完进行操作！
    $(function(){
        $("#btn").click(function(){
            /*1.var item = $("input[name=hobby][checked]").val();
            alert(item);
            /*2.$("input[type=radio]").attr("checked",'eat');*/
            /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/
            /*var item = $("select[name=ball] option[selected]").val();
            alert(item)*/
            /*$("select[name=ball]").val("pingpang");*/
            /*$("select[name=ball] option[text='篮球']").attr("selected",true);*/
            /*var item = $("#username").val();
            alert(item);*/
            /*$("#username").val("777");*/
            $("input[name=fruit]").attr("checked",true);
        });
    });
    
</script>
</body>
</html>

View Code

　　2.获取被选中的复选框的长度

var l = $("input[name=fruit]:checked").length;

　　3.遍历被选中的checkbox的值

$("input[name=fruit]:checked").each(function(){
                alert(this.value);
            });

　　当然，也可以包装为jQuery对象的写法：

$("input[name=fruit]:checked").each(function(){
                alert($(this).val());
            });

　　全选与全不选

$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
})

$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
})

　　全选框控制一组复选框全选全不选状态：

    //全选框的单击事件：
        $("#check_all").click(function(){
            //直接使用attr()时是undefined，因为我们定义的时候没有定义，我们使用prop()
            //$(this).prop("checked");
            //下面的单个的框的值就是全选的状态的值
            $(".check_item").prop("checked",$(this).prop("checked"));
        });

　　未选满时，全选框未选中

//为后来动态生成的check_item绑定单击事件
        $(document).on("click",".check_item",function(){
            //若当前选中的元素为5个全选，则全选按钮选中
                //当然，这里不能写死，如果将来变为6个7个还需改动
            var flag = $(".check_item:checked").length == $(".check_item").length;
                $("#check_all").prop("checked",flag);
            
        });

//补充：重置表单：$('#yigeform')[0].reset()

查看全文

相关阅读:
七牛云上传图片
 找到当前字符串中最后一个/并获取之后的字符串
 jquery正则表达式验证：验证身份证号码
 apply()与call()的区别
 js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf
改变父元素的透明度，不影响子元素的透明度—css
c实现生产者消费者问题。 windows下。
python基础练习 dict切片
 html+css test1
codewars[7]-python Friend or Foe?

原文地址：https://www.cnblogs.com/jiangbei/p/7100970.html