js判断checkbox是否被选中 js获取复选框选中的值

在web前端做一些类似于用户数据提交的功能时,有时需要使用html复选框,让用户自定义和选择一些默认的项目。今天我们来谈谈如何用javascript和jquery来判断html复选框是否被选中。判断javascript复选框是否被选中的方法示例1:<!--html代码--><input type="checkbox"...

在web前端做一些类似于用户数据提交的功能时,有时需要使用html复选框,让用户自定义和选择一些默认的项目。今天我们来谈谈如何用javascript和jquery来判断html复选框是否被选中。

判断javascript复选框是否被选中的方法

示例1:

<!--html代码--><input type="checkbox" name="green" onclick="Get(this)" />绿色<script> function Get(e){ //每次点击都会输出当前的状态 console.log(e.checked); }</script>

示例2:

<!--html代码--><input type="checkbox" name="green" onclick="Get()" />绿色<script> function Get(){ var check = document.getElementsByTagName('input')[0]; //每次点击都会打印出当前的状态 console.log(check.checked); }</script>

输出结果:

注意:

1.当复选框被选中时,输出true,否则输出false。

2.上面两个例子效果一样,只是调用的方法不同。

Jquery判断复选框是否被选中的方法

Jquery可以用is()和prop()来判断复选框是否被选中,这两个方法都很简单。

Is()方法确定复选框是否被选中:

<!--html代码--><input type="checkbox" name="host" id="mochu" />网站:http://***.feiniaomy.com<script> $('#mochu').click(function(){ console.log($(this).is(':checked')); });</script>

确定复选框是否被选中的prop()方法的代码:

<script> $('#mochu').click(function(){ console.log($(this).prop('checked')); });</script>

注意:prop()方法只能在jQuery版之后使用,1.6之前的版本会报错。

补充内容:

在jquery 1.6之前,attr()方法可以用来确定复选框是否被选中,但在1.6之后,attr()方***返回undefined。

示例代码:

$('mochu').attr('checked')

本文来自夜遇投稿,不代表舒华文档立场,如若转载,请注明出处:https://www.chinashuhua.cn/24/566918.html

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
() 0
上一篇 05-28
下一篇 05-28

相关推荐

  • jquery复选框全选反选按键 jquery获取复选框的值

    选择全部、无、部分和全部购物车是常见的网站效果。这个例子是之前写的一个购物车页面,有兴趣的朋友可以互相讨论一下。效果图:购物车的页面,购物车里有各个店铺的商品,每个店铺的所有商品都可以从当前店铺的所有商品中选择,所以店铺之间的选择互不影响。Html代码:因为代码

    2023-07-22 17:33:01
    939 0
  • js判断checkbox是否被选中 js获取复选框选中的值

    在web前端做一些类似于用户数据提交的功能时,有时需要使用html复选框,让用户自定义和选择一些默认的项目。今天我们来谈谈如何用javascript和jquery来判断html复选框是否被选中。判断javascript复选框是否被选中的方法示例1:<!--html代码--><input type="checkbox"

    2023-05-28 14:28:01
    682 0
  • js如何判断复选框是否被选中 js获取复选框选中的值

    相信很多人经常会遇到全选或者不全选的情况,依然是淘宝上的购物车,而这个也可以用脚本来完成相应的功能。所以这篇博文主要是介绍相关的知识点。一.案件要求我们希望在后台系统实现一个批量删除操作(全选复选框),显示效果如下:第二,步骤分析第一步,首先我们要实现这个页面

    2023-05-09 14:10:01
    332 0
  • DreamweaverCS3的复选框怎么用

    你说的是模板。首先,您需要创建一个新的web页面来应用这个模板,然后单击右边的“Resources”并单击倒数第二个模板图标。然后,你的模板会出现在右边的框中,然后用鼠标把它拖到你的新网页上。我没有用按钮,也没有用复选框,因为我觉得复选框更合适。如果你觉得按钮不错,可

    2023-04-24 05:53:01
    746 0

评论列表

联系我们

在线咨询: QQ交谈

邮件:admin@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信