jquery 操作 checkbox 相关方法

最新推荐文章于 2023-02-23 18:15:52 发布

悟世君子

最新推荐文章于 2023-02-23 18:15:52 发布

阅读量1.3k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/wsjzzcbq/article/details/110336886

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用 jquery 操作 checkbox ，相关方法如下

1、设置 checkbox 选中

使用 prop("checked", true) 方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div>
            <form>
                <input type="checkbox" name="name" value="1" />贾元春
                <input type="checkbox" name="name" value="2" />贾迎春
                <input type="checkbox" name="name" value="3" />贾探春
                <input type="checkbox" name="name" value="4" />贾惜春
            </form>
        </div>
        <script>
            $('input[name=name]:eq(2)').prop("checked", true);	
        </script>
    </body>
</html>

设置 name 是 name 的第3个 input 输入框选中

2、设置 checkbox 不选中

使用 prop("checked", false) 方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div>
            <form>
                <input type="checkbox" name="name" value="1" checked="checked" />贾元春
                <input type="checkbox" name="name" value="2" checked="checked" />贾迎春
                <input type="checkbox" name="name" value="3" checked="checked" />贾探春
                <input type="checkbox" name="name" value="4" checked="checked" />贾惜春
            </form>
        </div>
        <script>
            $('input[name=name]:eq(2)').prop("checked", false);	
        </script>
    </body>
</html>

设置 name 是 name 的第3个 input 输入框不选中

3、判断是否选中

使用 is(':checked') 方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div>
            <form>
                <input type="checkbox" name="name" value="1" checked="checked" />贾元春
                <input type="checkbox" name="name" value="2" checked="checked" />贾迎春
                <input type="checkbox" name="name" value="3" checked="checked" />贾探春
                <input type="checkbox" name="name" value="4" checked="checked" />贾惜春
            </form>
        </div>
        <script>
            let check = $('input[name=name]:eq(2)').is(':checked')
			console.log(check)
        </script>
    </body>
</html>

判断 name 是 name 的第3个 input 输入框是否选中

4、获取全部选中项

使用 $('input[name=name]:checked') 形式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div>
            <form>
                <input type="checkbox" name="name" value="1" checked="checked" />贾元春
                <input type="checkbox" name="name" value="2" checked="checked" />贾迎春
                <input type="checkbox" name="name" value="3"  />贾探春
                <input type="checkbox" name="name" value="4" checked="checked" />贾惜春
            </form>
        </div>
        <script>
            let vs = $('input[name=name]:checked')

			//遍历
			for(let v of vs) {
				console.log(v.value)
			}
			//或
			$.each(vs, function() {
				console.log($(this).val())
			})
      </script>
    </body>
</html>

获取 name 是 name 的 input 输入框选中的 value 值

至此完

悟世君子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 操作 checkbox 相关方法

使用 jquery 操作 checkbox ，相关方法如下1、设置 checkbox 选中使用prop("checked", true) 方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.min.js"&g..
复制链接

扫一扫