首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用jQuery的prop()单击复选框不会运行设置在复选框上的onClick()函数

使用jQuery的prop()方法可以获取或设置元素的属性值。在复选框上使用prop()方法设置checked属性可以实现复选框的选中或取消选中操作,但是不会触发复选框上设置的onClick()函数。

这是因为使用prop()方法只是修改了元素的属性值,并不会模拟用户的点击操作,所以不会触发onClick()函数。如果需要在复选框的状态改变时执行特定的函数,可以使用jQuery的change()方法。

change()方法是绑定在复选框上的事件,当复选框的选中状态发生改变时会触发该事件。我们可以在change()方法中执行需要的操作。

以下是一个使用change()方法的示例:

代码语言:txt
复制
$(document).ready(function() {
  $('#checkbox').change(function() {
    if ($(this).is(':checked')) {
      // 复选框被选中时的操作
    } else {
      // 复选框取消选中时的操作
    }
  });
});

在上面的示例中,当id为"checkbox"的复选框的选中状态发生改变时,会触发相应的操作。你可以在if和else语句中编写需要执行的代码。

对于推荐的腾讯云相关产品和产品介绍链接地址,可以根据具体的业务需求和场景选择合适的产品。腾讯云提供了丰富的云计算服务,包括但不限于云服务器、云数据库、云存储、人工智能等。你可以在腾讯云官网上查看相关产品的详细介绍和文档。

请注意,以上答案仅供参考,具体的产品选择和实现方式应根据实际情况和需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • jQuery实战

    5、综合案例 复选框 5.1、案例效果 5.2、分析和实现 功能分析 全选 为全选按钮绑定单击事件。 获取所有的商品项复选框元素,为其添加 checked 属性,属性值为 true。...全不选 为全不选按钮绑定单击事件。 获取所有的商品项复选框元素,为其添加 checked 属性,属性值为 false。...反选 为反选按钮绑定单击事件 获取所有的商品项复选框元素,为其添加 checked 属性,属性值是目前相反状态。 代码实现 <!...//全不选 //1.为全不选按钮添加单击事件 $("#selectNone").click(function(){ //2.获取所有的商品复选框元素,为其添加checked...reverse").click(function(){ //2.获取所有的商品复选框元素,为其添加checked属性,属性值是目前相反状态 let items = $(

    1.9K20

    学习jQuery?这篇文章就够了

    }); script> 九、jQuery事件绑定 1、传统事件绑定 1.1、标签中使用on事件属性 button> 1.2、通过JS给标签设置 on...(事件名, 响应函数); 2、jQuery 事件绑定 查看 jQuery 文档:jQuery对象.click(fn),页面加载事件处理,对比之前使用原生区别,之前只能绑定一个处理函数。...> function checkChange(src) { // 根据被点击复选框,来决定下面这些爱好复选框选中状态 var checked = $(src...]').prop('checked', flag); // 点击全选按钮时候,最上面复选框要选中 // 点击全不选按钮时候,最上面复选框不要选中 $(...}); // 当遍历结束时候,total 值仍是 true, 那么代表所有爱好复选框是选中 $('#checkAll').prop('checked', total

    12.3K10

    checkbox选中和不选中

    根据W3C最新规定,当复选框未被选中时,post不会向服务器提交值,这就导致了变量未初始化问题。看网上有多少朋友添加隐藏形式来解决。如果有多个复选框,会增加很多代码。...* *我找到了一个简单解决方案: 1.自动将值1设置为由jquery检查。 2.提交时,执行getCheckBoxVal函数,遍历所有复选框,将选中设置为1。...3.将未选中选项值设置为0,将复选框选项设置为选中,并保持选中状态以确保将其提交到服务器。** * *该方法也适用于无线电组件。** $(文档)。...prop('checked ',true); }) 提交前执行GetCheckBoxVal(){//将选中复选框设置为1,将未选中复选框设置为选中,将值设置为0。...each(function(){//遍历所有复选框 如果($(这个)。prop('checked')==true){ $(这个)。val(' 1 '); } 否则{ $(这个)。

    1.9K30

    jQuery 属性操作

    1.jQuery 属性操作 ​ jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带属性,...(该方法也可以获取 H5 自定义属性) 1.3 数据缓存 data() ​ data() 方法可以指定元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放数据都将被移除。...2.因为checked 是复选框固有属性,此时我们需要利用prop()方法获取和设置该属性。 3.把全选按钮状态赋值给3小复选框就可以了。...4.当我们每次点击小复选框按钮,就来判断: 5.如果小复选框被选中个数等于3 就应该把全选按钮选上,否则全选按钮不选。6....如果小复选框被选中个数等于3 就应该把全选按钮选上,否则全选按钮不选。

    1.8K20

    jQuery使用

    (){ alert("李四"); });[jQuery页面加载函数可以存在多个(不会发生覆盖), 它会按照顺序进行执行。...第四步:设置定时操作(显示广告图片函数) 第五步:显示广告图片函数中,使用jQuery方法让广告图片显示(show()) 第六步:清除显示广告图片定时操作 第七步:设置定时操作(隐藏广告图片函数...2.技术分析 需要使用jquery选择器(id选择器、类选择器) 需要使用jquery属性操作方法 prop() 3.步骤分析 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件...第四步:将下面所有的复选框选中状态设置成跟上面的一致!.../js/jquery-1.8.3.js" > $(function(){ //找到下面所有的复选框设置属性checked() /*if($("#select

    8.2K31

    【Java 进阶篇】JQuery 案例:全选全不选,为选择添彩

    JQuery 全选全不选实现原理 全选全不选实现原理十分简单,主要涉及到以下几个步骤: 选择触发全选和全不选操作元素,如一个复选框或按钮。...使用 JQuery 选择器选中需要进行全选和全不选操作目标元素,通常是表格中多个复选框。 为触发元素绑定事件,监听其点击事件。...事件处理函数中,通过 JQuery 选择器选中目标元素,并设置它们 checked 属性,实现全选和全不选效果。 下面是一个基本实现示例: <!...var isChecked = $(this).prop("checked"); // 设置所有复选框状态...然后,通过为这两类元素分别绑定点击事件处理函数函数中根据点击元素状态设置目标元素状态,从而实现全选和全不选效果。

    34840

    jQuery」基础 - 02

    (该方法也可以获取 H5 自定义属性) 1.1.3 数据缓存 data() data() 方法可以指定元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放数据都将被移除。...因为checked 是复选框固有属性,此时我们需要利用prop()方法获取和设置该属性。 把全选按钮状态赋值给3小复选框就可以了。 当我们每次点击小复选框按钮,就来判断。...语法1 注意:此方法用于遍历 jQuery 对象中每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...语法2 注意:此方法用于遍历 jQuery 对象中每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...() { $('.j-checkbox, .checkall').prop('checked', $(this).prop('checked')); // 令各个复选框值等于全选框checked

    2.8K20

    前端成神之路-02_jQuery

    (该方法也可以获取 H5 自定义属性) 1.1.3 数据缓存 data() ​ data() 方法可以指定元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放数据都将被移除。...2.因为checked 是复选框固有属性,此时我们需要利用prop()方法获取和设置该属性。 3.把全选按钮状态赋值给3小复选框就可以了。...4.当我们每次点击小复选框按钮,就来判断: 5.如果小复选框被选中个数等于3 就应该把全选按钮选上,否则全选按钮不选。 6....注意:此方法用于遍历 jQuery 对象中每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。 语法2 ? ​...注意:此方法用于遍历 jQuery 对象中每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。

    2.3K10

    jQuery 元素操作

    注意:此方法用于遍历 jQuery 对象中每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。 语法2 ?...注意:此方法用于遍历 jQuery 对象中每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...清理购物车 3.商品后面的删除按钮: 一定是删除当前商品,所以从 $(this) 出发 4.删除选中商品: 先判断小复选框按钮是否选中状态,如果是选中,则删除对应商品 5.清理购物车: 则是把所有的商品全部删掉...       // 如果小复选框选中个数等于所有小复选框个数,则选中全选按钮 否则不选中        // .j-checkbox:checked 选中复选框        if ($(...", true);       } else {            $(".checkall").prop("checked", false);       };        // 如果小复选框被选中

    2.6K50

    Web-第四天 jQuery学习

    1.2.1.3 引入和对象获取 学习JavaScript时,我们就学习过自定义JS库导入,学习jQuery只需要将对应js库下载,并导入到我们项目下,html页面使用导入即可。...attr() 设置标签属性 removeAttr() 移除标签属性。 注意:prop() 和 attr() 使用时容易混淆,建议先使用prop() 没有效果,再使用attr()。...3.3 案例实现 // 复选框全选和全不选: $(function(){ // 步骤一:为上面的复选框绑定单击事件: $("#selectAll").click(function(){ /*if(this.checked...== true){ // 如果上面的复选框被选中: $("input[name='ids']").prop("checked",true); }else{ // 上面的复选框没有被选中 $("input...("#reverseId").click(function(){ // 给每一个input设置与自己相反状态 // 使用函数进行数据返回 function(){ return ...} // 函数内部

    3.5K40

    jQuery 属性操作

    jQuery 常用属性操作有三种:prop() / attr() / data() ; 一、元素固有属性值 prop() 所谓元素固有属性就是元素本身自带属性,比如 元素里面的 href...(该方法也可以获取 H5 自定义属性) 三、数据缓存 data() data() 方法可以指定元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放数据都将被移除。...2.因为checked 是复选框固有属性,此时我们需要利用prop()方法获取和设置该属性。 3.把全选按钮状态赋值给3小复选框就可以了。...4.当我们每次点击小复选框按钮,就来判断: 5.如果小复选框被选中个数等于3 就应该把全选按钮选上,否则全选按钮不选。 6....").change(function () {        // 每次改变小复选框状态都要判断小复选框是否全被选中        // 如果小复选框选中个数等于所有小复选框个数,则选中全选按钮

    1.5K30

    一文入门jQuery

    除非特殊要求, 一般不会使用3.x版本,很多老jQuery插件不支持这个版本。 目前该版本是官方主要更新维护版本。...--> 内容 val(): 获取/设置元素value属性值 属性操作 通用属性操作 attr(): 获取/设置元素属性 removeAttr():删除属性 prop():获取/设置元素属性 removeProp...如果操作是元素固有属性,则建议使用prop 如果操作是元素自定义属性,则建议使用attr 对class属性操作 addClass():添加class属性值 removeClass():删除class.../js/jquery-3.3.1.min.js"> //分析:需要保证下边选中状态和第一个复选框选中状态一致即可 function...selectAll(obj){ //获取下边复选框 $(".itemSelect").prop("checked",obj.checked);

    3.5K20
    领券