js点击行选中checkbox

1、点击行选中checkbox复选框

//点击行勾选
$("#Qub_tb_List").on("click", "tr", function () {
    var input = $(this).find("input");
    if ($(input).val() == "on") {
        return;
    }
    $("#Qub_tb_List *").not(input).prop("checked", false);  //点击行,只能选择一行
    if (!$(input).prop("checked")) {
        $(input).prop("checked", true);
    } else {
        $(input).prop("checked", false);
    }
});

2、全选功能

//多选框 防止事件冒泡
$("#Qub_tb_List").on("click", "input", function (event) {
    event.stopImmediatePropagation();
});

//全选功能
$("input[name=‘all_check‘]").change(function () {
   if (this.checked) {
    $("input[name=‘check_tr‘]:checkbox").each(function () {
        this.checked = true;
      })
   } else {
     $("input[name=‘check_tr‘]:checkbox").each(function () {
     this.checked = false;
      })
   }
  });
时间: 2024-08-30 07:11:36

js点击行选中checkbox的相关文章

jquery 点击tr选中checkbox,解决checkbox的默认点击事件被阻止的问题

  1.第一种,!$(event.target).is('input'),判断触发事件的元素是否为input.此时使用event.target,而不是this,获取事件本身,防止触发事件冒泡的问题. $("#data_table tr").on("click",function (event) { if (!$(event.target).is('input')) { $('input:checkbox', this).prop('checked', functio

js获取多个选中checkbox的值

var chk_val = new Array(); var bed_obj = $("input[name='SupportingFacilities']"); for(var i in bed_obj){ if(bed_obj[i].checked){ chk_val.push(bed_obj[i].value); } }

jQuery_review之table中根据行选中,进行背景变色和checkbox选中

继续复习jQuery,对table来说,上面除了单选之外,还有多选的一个控制.对于多选来说,需要对多选的内容进行高亮显示,还应该在页面加载的时候,对已经默认选中的内容进行高亮.这些小功能也是复习jQuery选择器的一个很好地素材,有非常多的实现方式,不仅仅拘泥于一种,只要能将功能健壮的实现了,就是比较不错的了. 在一本资料上,看到了这样的一种jQuery的写法,还是非常的惊艳! element[hasClassName?"removeClass":"addClass"

Js实现表单中的checkbox对勾选中效果

<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" /> <title>JS实现单个图片选中美化框</title> <style type="text/css"> body,

JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; cha

Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:  index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-anima

js实现表格的选中一行-------Day58

最开始想更多的用js来动态操作表格,是因为在应用了easyUI之后,发现直接写一个<table id="tt"></table>,这就够了,界面里面就剩下这么一个标签了,豁然干净了好多啊,当然要应用的还有好多知识,像json等,那个后期再说这里先模仿生成下table的一些样式吧. 前面记录了动态的增加一行,insertRow()和insertCell()这么两个方法:然后又记录了删除一行或者一列的deleteRow()和deleteCell(),记得哦,没写的话

js--checked的全选,反选 ,点击子的checkbox改变父的checkbox状态

下面是我通过学习js基础利用js简单的实现了一个小的案例包含具体的思路和代码,这里的表格没有写css样式美化. 点击父的checkbox时呈现的状态 当子的checkbox没有全部选中时,父的checkbox也改变了相应的状态 点击反选之后呈现的状态 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=

js实现的购物车选中商品实现计算商品总价格

js实现的购物车选中商品实现计算商品总价格:为了在激烈的互联网竞争中获得一席之地,都努力使自己的网站更为人性化,比如在购物网站一般都有这样的功能,那就是在结算商品的时候,网站可以自动计算要购买商品所需要花费的金钱数量.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http: