学习记录354@jQuery操作复选框和下拉列表之选择、判断是否被选中、设置默认选中

最新推荐文章于 2023-05-29 23:47:31 发布

教练我想学编程

最新推荐文章于 2023-05-29 23:47:31 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/weixin_44663675/article/details/110410466

版权

一个问题有多种方法，的确让人很无奈，不知是不是开发者的本意是提供更加便利的方式，可不曾想反而带来不便。
记不住，也没有必要记，查阅文档即可

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <script src="js/commons.js"></script>
    <script src="js/getparameter.js"></script>

    <script>
        $(function () {
            //选择所有的option
            let options = $("#select1 option");
            // 循环每个option
            for (let i = 0; i < options.length; i++) {
                //取到每个option,注意用索引取值后，变为DOM对象，
                // 要使用JQuery的attr方法，要使用JQuery的attr方法，要先转为jQuery对象
                let option = options[i];
                option = $(option);//DOM对象转为jQuery对象
                // 设置为选中
                option.attr("selected", "selected");//推荐
                // 或者option.attr("selected", true);
                // 或者option.prop("selected", "selected");

                //判断是否被选中
                alert(option.attr("selected") == "selected")//推荐,最好理解
                //is本质是根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，
                // 如果其中至少有一个元素符合这个给定的表达式就返回true。
                // alert(option.is(":selected"))
                //或者alert(option.is(":checked"))

                //prop本质是获取在匹配的元素集中的第一个元素的属性值。
                //jquery下option这样取值,如果被选中,则返回true
                //或者alert(option.prop("selected"))

            }


            //选择所有的checkbox
            let checkboxs = $("div :checkbox");//注意分号前有个空格

            //取到每个checkbox,注意用索引取值后，变为DOM对象，
            // 要使用JQuery的attr方法，要使用JQuery的attr方法，要先转为jQuery对象
            for (let i = 0; i < checkboxs.length; i++) {
                let checkbox = checkboxs[i];
                checkbox = $(checkbox);//DOM对象转为jQuery对象

                // 设置为选中

                checkbox.attr("checked", "checked");//推荐
                //或者checkbox.attr("checked", true);
                //或者checkbox.prop("checked", "checked");

                //判断是否被选中
                alert(checkbox.attr("checked") == "checked")//最好理解

                //is本质是根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，
                // 如果其中至少有一个元素符合这个给定的表达式就返回true。
                //或者alert(checkbox.is(":checked"))

                //prop本质是获取在匹配的元素集中的第一个元素的属性值。
                //因为jQuery使用这种方式,如果被选中,checked属性值就是true,因此可以进行判断是否被选中
                //或者alert(checkbox.prop("checked"))
            }

        })
    </script>

</head>
<body>
<br>
<br>
<br>
<br>
下拉列表
<select id="select1" multiple="multiple">
    <option id="option1">1</option>
    <option id="option2">2</option>
    <option id="option3">3</option>
</select>
<br>
<br>
<br>
<br>
复选框
<div>
    checkbox1:<input id="checkbox1" type="checkbox">
    checkbox2:<input id="checkbox2" type="checkbox">
    checkbox3:<input id="checkbox3" type="checkbox">
</div>

<br>
<br>
<br>
<br>
<button id="submit">提交</button>
</body>
</html>

在这里插入图片描述

教练我想学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习记录354@jQuery操作复选框和下拉列表之选择、判断是否被选中、设置默认选中

一个问题有多种方法，的确让人很无奈，不知是不是开发者的本意是提供更加便利的方式，可不曾想反而带来不便。记不住，也没有必要记，查阅文档即可<!DOCTYPE html><html lang="zh-cn"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" cont
复制链接

扫一扫