jQuery(四)——jQuery 的属性操作:attr()、prop()

2. jQuery 的属性操作

  1. attr() 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等等
    此外,attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj
  2. prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等等

2.1 attr、prop案例演示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-01-31title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      

            alert( $(":checkbox:first").attr("name") ); // 获取第一个checkbox的name属性的值
            $(":checkbox:first").attr("name","checkbox3") ; // 设置第一个checkbox的name属性的值
            alert( $(":checkbox:first").attr("name") );  //再次获取,检测是否设置成功

        attr属性测试 checked属性
            alert( $(":checkbox:eq(0)").attr("checked"));  //返回第一个checkbox的checked属性的值:checked
            alert( $(":checkbox").eq(1).attr("checked"));  //返回第二个checkbox的checked属性的值:undefined
            alert( $(":checkbox").eq(2).attr("checked"));  //输出checked

        prop属性测试 checked属性
            alert($(":checkbox:eq(0)").prop("checked"));   //输出true
            alert($(":checkbox:eq(1)").prop("checked"));   //输出false
            alert($(":checkbox:last").prop("checked"));    //输出true

        });

    script>
head>
<body>
    <input name="checkbox1" type="checkbox" checked="checked" value="checkbox1" />checkbox1
    <input name="checkbox2" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox4" type="checkbox" checked="" value="checkbox4" />checkbox4
body>
html>

对于checked属性,只要写了checked="",存在这样的属性定义,里面不用赋值或者随便赋值checked=""(空串)、checked=“abc”、checked=“checked”,都认为是checked=“checked”。

当获取checked、selected、disabled等属性,我们只关心它们是否被选中(true、false),而不关系它们具体的值,因此获取这种属性的值时,推荐用prop方法。

$(":checkbox:first").attr("name","checkbox3") ; 可以用attr方法设置第一个checkbox的name属性的值

那么怎么设置第一个checkbox的checked属性,使其被选中或者取消选中呢?
$(":checkbox:first").prop("checked",false ); //取消选中
$(":checkbox:eq(1)").prop("checked",true ); //被选中,true、false 不加引号
其中第二条被选中可以用val方法替代:
$(":checkbox").val(["checkbox2"]);
此时是把这三个checkbox看成一组选项,val[ ’ ’ ] 里面填的是欲选中的该组的其中的checkbox的属性值即可选中。
注意,这种方法只能获取是否被选中,使之初始化时选中,不能取消选中。
个人感觉:这两种方法:val更偏向于初始化时操作,prop使用会更多。

辨析

  1. text 和 html方法是获取和设置标签之间省略号部分的内容 < span >……< /span >
  2. val方法是获取和设置ipnut便签的内容:当input为text password时,和text方法差不多;
    当为radio单选框 、checkbox多选框、 select下拉列表时,可以判断是否选中和没有选中,和prop方法差不多。
  3. attr方法是可以获得标签的属性的取值 < span ……> < /span>

此外,attr方法还支持自定义自己的标签属性给一个标签属性:
假设 定义给上面的checkbox1定义一个名叫DIYlable的属性,给该属性赋值为"my label"。

<script tyep="text/javascript">
 $(function () {
      
            $(":checkbox:first").attr("DIYlabel","my label");
            alert($(":checkbox").first().attr("DIYlabel"));
        });
script>

2.2 应用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-01-31title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
    <script type="text/javascript">
实现功能的代码
    script>
head>
<body>
    <form method="post" action="">
		你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全 选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反 选" />
		
		<input type="button" id="sendBtn" value="提 交" />
	form>
body>
html>

界面如图所示:
jQuery(四)——jQuery 的属性操作:attr()、prop()_第1张图片
要求实现:

  1. 全选、全不选、反选 按钮基本功能
  2. 全选/全不选 多选框:当选中时,下面多选框也全选中;当从选中变为未选中时,下面多选框也全不选中。(主动)
  3. 一个个的选,当满足全选的时候,全选/全部选标签 也被选中,其他情况下,全不选或者没选完时都不会打上。(被动)
  4. 【提交】按钮,对选中的球进行输出
<script type="text/javascript" src="../script/jquery-1.7.2.js">script>
<script type="text/javascript">

        $(function () {
      

   1. 给 全选按钮 绑定单击事件,除button按钮外,都选中 (因为这里只有button和checkbox)
             $("#checkedAllBtn").click(function () {
      
                $(":checkbox").prop("checked", true);
             });     //同时,全选/全不选 也被选中

   2. 给 全不选按钮 绑定单击事件
             $("#checkedNoBtn").click(function () {
      
                 $(":checkbox").prop("checked", false);
             });      //全选/全不选 不被选中

   3. 给 反选按钮 绑定单击事件
             $("#checkedRevBtn").click(function () {
      
                 $(":checkbox").each(function () {
      
                     this.checked=!this.checked;
                 });// 在each遍历的function函数中,有一个this对象。这个this对象是当前正在遍历到的dom对象
                 //但是注意两个的极端情况,当本身全选时,反选就是全不选;当本身全不选时,反选就是全选
                 //当反选是全选时,需要给选/全不选 input标签 也给选上;当反选是全不选时,无影响,不考虑;
                 var allCnt=$(":checkbox[name='items']").length;
                 // 获取全部的球类个数,是个定值, 当[name!='items']时,需要先判断name属性是否存在,等于时不用
                 var checkedCnt=$(":checkbox[name='items']:checked").length;
                                                // 再获取 选中 的球类个数
                 $("#checkedAllBox").prop("checked",allCnt==checkedCnt);
                    //判断全选/全不选 input标签 是否选中,当选中的球类个数等于全部的时候,代表该是全选了,为true
             });

    4. 给 全选/全不选 多选框 绑定点击事件
            $("#checkedAllBox").click(function () {
      
               // alert(this.checked);
                //经测试得知,在该函数中的this对象,是点击多选框之后的this对象,即先点击多选框,再判断this.checked
                //所以,当点击完选中后,同时会输出true;不选中点击后,会输出false,利用这一特性,不用再if判断了
                $(":checkbox[name='items']").prop("checked",this.checked);
            });          //给所有name='items'的多选框修改属性值

    4plus. 4存在一个问题,当一个个选,当全选时,也会触发全选/全不选 多选框,此时再取消一个,也要判断是不是取消全选/全不选
            //       给每个球的多选框都绑定单击事件
            $(":checkbox[name='items']").click(function () {
      
               //每选中一个球,都要判断是不是最后一个
                var allCnt=$(":checkbox[name='items']").length;
                var checkedCnt=$(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",allCnt==checkedCnt);
            });

   5.【提交】按钮单击事件,对选中的球进行输出
            $("#sendBtn").click(function () {
      
                $(":checkbox[name='items']:checked").each(function () {
      
                    alert(this.value);
                });
            });

        });
script>

你可能感兴趣的:(JavaWeb,js,jquery,javascript,java,checkbox)