用jQuery 点击单选框 全部选中 如何做

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用jQuery 点击单选框 全部选中 如何做相关的知识,希望对你有一定的参考价值。

<body>
<table border="1">
<tr>
<td><input type="checkbox" name="chooseAll"></td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td><input type="checkbox" value="1" name="choose"></td>
<td>zs</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" value="2" name="choose"></td>
<td>ls</td>
<td>22</td>
<td>男</td>
</tr>

最简单的方法吧也有助于你学习:
给每个 checkbox 增加同一Class
<input type="checkbox" value="2" name="choose" class="test">
在<title></title>下加入
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
$(".test").click(function()
$(".test")..attr("checked",true);
);
);

有问题给我发邮件吧 liujm@cssweb.sh.cn
参考技术A $(document).ready(function()$('[name=chooseAll]').click(function()$('[name=choose]').attr('checked',$(this).attr('checked')););); 参考技术B 引入JQ文件步骤忽略

<tr>
<td><input type="checkbox" name="chooseAll" onclick="javascript:abc()"></td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td><input type="checkbox" value="1" name="choose"></td>
<td>zs</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" value="2" name="choose"></td>
<td>ls</td>
<td>22</td>
<td>男</td>
</tr>

function abc()
var status=$("input[name=chooseAll]").attr("checked");

if(status)
$("input[name=choose]").attr("checked",true);

else
$("input[name=choose]").attr("checked",false);



Jquery实现账单全部选中和部分选中管理

在做购物车系统是我们往往会遇到这样一个需求,在点击全选框时我们要将全部的单个账单都选中;在单个选中账单时,如果账单全部被选中则需要全选框处于选中状态,若没有全部被选中则全选框处于没选中状态;

以下是在学习过程的实现代码:

<script type="text/javascript">
$(document).ready(function(){
//删除当前行商品元素
// $(".del").click(function () {
// $(this).parent().parent().remove();
// });
/* $(".del").on("click",function () {
$(this).parent().parent().remove();
}); */

$(".del").live("click",function () {
$(this).parent().parent().remove();
});

$(".add").click(function () {
//创建新节点
var $newPro = $("<tr>"
+ "<td>"
+ "<input name=‘‘ type=‘checkbox‘ value=‘‘ />"
+ "</td>"
+ "<td>"
+ "<img src=‘../image/computer.jpg‘ class=‘products‘ />"
+ "<a href=‘#‘>联想笔记本电脑</a>"
+ "</td>"
+ "<td>¥3189元</td>"
+ "<td>"
+ "<img src=‘../image/subtraction.gif‘ width=‘20‘ height=‘20‘ />"
+ "<input type=‘text‘ class=‘quantity‘ value=‘1‘ />"
+ "<img src=‘../image/add.gif‘ width=‘20‘ height=‘20‘ />"
+ "</td>"
+ "<td><a href=‘#‘ class=‘del‘>删除</a></td>"
+ "</tr>");
//在table中插入新建节点
$("table").append($newPro);
});
$("button").bind({
click:function(){},
mouseover:function(){ },
mouseout:function(){ }
});

$("th input[type=‘checkbox‘]").on("click",function(){
  if($(this).attr("checked")=="checked"){//点击全选复选框 全选所有商品
    var $selectAll = $("tr td input[type=‘checkbox‘]");
    //alert($selectAll.length);
    $selectAll.each(function(){
    $(this).attr("checked","checked");
  });
}else{//点击全选复选框 取消全选所有商品
  var $selectAll = $("tr td input[type=‘checkbox‘]");
  //alert($selectAll.length);
 $selectAll.each(function(){
  $(this).attr("checked",false);
 });
}
});
 $("tr td input[type=‘checkbox‘]").live("click",function (){//给所有的checkbox多选框绑定click事件
  var i =0;//声明一个变量记录选中的个数
  $("tr td input[type=‘checkbox‘]").each(function(){
    if($(this).attr("checked")=="checked"){//如果选中记录数+1
      i=i+1;
    };
  });
  if(i==$("tr td input[type=‘checkbox‘]").length){//如果全部选中则将全选按钮设为选中状态
    $("th input[type=‘checkbox‘]").attr("checked","checked");
  }else{
    $("th input[type=‘checkbox‘]").attr("checked",false);
  };
 });
}); 
</script>

实现效果:

点击全选----则商品内容全部选中      取消选中全选则全部取消    代码天蓝色部分效果如图   

技术分享技术分享

点击添加按钮可以添加预先设置好的元素及代码蓝色部分   效果如图

技术分享

依次选中单个账单,当账单全部被选中时,全选按钮被设为选中状态,代码红色部分,若没全部选中时则状态不变  效果如图

技术分享技术分享


以上是关于用jQuery 点击单选框 全部选中 如何做的主要内容,如果未能解决你的问题,请参考以下文章

jquery 如何获取单选框的值?

在winform中如何获取两个单选框中选中的那个值

jquery Tree 如何设置单选

angularjs怎么获取到单选框的值

angularjs怎么获取到单选框的值

JS单选框不能选中?