jquery数组之存放checkbox全选值示例代码,方便实用
分类:计算机网络

您可能感兴趣的文章:

  • JQUERY复选框CHECKBOX全选,取消全选
  • jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
  • jquery复选框CHECKBOX全选、反选
  • jQuery实现复选框全选/取消全选/反选及获得选择的值
  • jquery复选框全选/取消示例
  • jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
  • js与jQuery实现checkbox复选框全选/全不选的方法
  • jQuery对checkbox 复选框的全选全不选反选的操作
  • 基于jQuery实现复选框的全选 全不选 反选功能
  • bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

 $("#btn2").click(function(){
  $("[name='checkbox']").removeAttr("checked");//取消全选
 });

<script type="text/javascript">
var arrChk=$("input[name='chk_list'][checked]");
$(arrChk).each(function(){
window.alert(this.value);
});
});
</script>

复制代码 代码如下:

var $ckAll = $("input[name='ckAll']");
var $ckItm = $("input[name='ckItm']");
var len = $ckItm.length;
$ckAll.click(function() {
  // 获取$ckAll当前选中状态,如果选中,其他子复选框则选中,反之则取消
    $ckItm.prop('checked',this.checked);
});
$ckItm.click(function() {
    // 给b绑定判断事件
    var b=$ckItm.filter(":checked").length==len;// 当所选的子复选框个数等于总个数,主复选框则会被选中
    // 通过三元运算判断
    var flag=$ckAll.prop("checked",b?true:false);
});

 $("#btn4").click(function(){
  $("[name='checkbox']").each(function(){
   if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }else{
    $(this).attr("checked",'true');
   }
  });
 });

复制代码 代码如下:

</script>

复制代码 代码如下:

jQuery实现checkbox(复选框)选中、全选/反选代码:

<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
$("#chk_all").click(function(){
$("input[name='chk_list']").attr("checked",$(this).attr("checked"));
});
</script>
</body>
</html>

<input type="checkbox" id="checkAll" value="1">全选/全部不选
<input type="checkbox" name="items" value="1">1
<input type="checkbox" name="items" value="2">2
<input type="checkbox" name="items" value="3">3
<input type="checkbox" name="items" value="4">4
<input type="checkbox" name="items" value="5">
<input type="button" onclick="show()" value="提示选择的">
<script>
$("#chekcAll").click(function(){
if(this.checked){
$("input[name=items]").attr("checked","checked");
}
else{
$("input[name=items]").attr("checked",null);
}
})
function show(){
var strIds=new Array();//声明一个存放id的数组
$("input[name=items]").each(function (i,d){
if (d.checked) {
strIds.push(d.value);
}
})
if(strIds.length<1)
alert("您没有选中项!");
else{
var ids=strIds.join(",");
alert("你选中的字符串有:"+ids);
}

// 主复选框
<input type="checkbox" id="ck" name="ckAll">// 子复选框项
<input type="checkbox" id="ck1" name="ckItm">
<input type="checkbox" id="ck2" name="ckItm">
<input type="checkbox" id="ck3" name="ckItm">

jQuery判断checkbox(复选框)是否被选中: if($("#id").attr("checked")==true)

复制代码 代码如下:

您可能感兴趣的文章:

  • 多个jquery.datatable共存,checkbox全选异常的快速解决方法
  • jQuery CheckBox全选、全不选实现代码小结
  • jquery复选框CHECKBOX全选、反选
  • JQUERY CHECKBOX全选,取消全选,反选方法三
  • jquery中checkbox全选失效的解决方法
  • jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
  • Jquery CheckBox全选方法代码附js checkbox全选反选代码
  • jquery checkbox全选反选效果代码
  • jQuery checkbox全选/取消全选实现代码
  • jQuery实现CheckBox全选、全不选功能
  • jQuery实现table表格checkbox全选的方法分析

复制代码 代码如下:

您可能感兴趣的文章:

  • jquery实现全选、反选、获得所有选中的checkbox
  • JQUERY复选框CHECKBOX全选,取消全选
  • jQuery CheckBox全选、全不选实现代码小结
  • jquery复选框CHECKBOX全选、反选
  • 基于JQuery实现CheckBox全选全不选
  • checkbox全选/取消全选以及checkbox遍历jQuery实现代码
  • jquery中checkbox全选失效的解决方法
  • jQuery对checkbox 复选框的全选全不选反选的操作
  • 多个jquery.datatable共存,checkbox全选异常的快速解决方法
  • jQuery实现checkbox全选功能完整实例

下面的代码是获取上面实例中选中的checkbox的value值:

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox(复选框)是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){  
  if(this.checked){  
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");  
  }else{  
   $("input[name='checkbox']").each(function(){this.checked=false;});  
   $("#btn1").attr("value","全选");
  }  
 });

您可能感兴趣的文章:

  • jquery实现全选、反选、获得所有选中的checkbox
  • JQUERY复选框CHECKBOX全选,取消全选
  • jQuery CheckBox全选、全不选实现代码小结
  • jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
  • jquery复选框CHECKBOX全选、反选
  • 基于JQuery实现CheckBox全选全不选
  • jquery中checkbox全选失效的解决方法
  • jQuery对checkbox 复选框的全选全不选反选的操作
  • 多个jquery.datatable共存,checkbox全选异常的快速解决方法
  • jQuery实现checkbox全选功能完整实例

 $("#btn5").click(function(){
  var str="";
  //$("input:checkbox[name='checkbox']:checked").each(function(){//可以
  $("[name='checkbox'][checked]").each(function(){
   str+=$(this).val()+"rn";
  });
  alert(str);
 });
});

 $("#btn3").click(function(){
  $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
 });

<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <input type="button" id="btn1" value="全选">
        <input type="button" id="btn2" value="取消全选">
        <input type="button" id="btn3" value="选中所有奇数">
        <input type="button" id="btn4" value="反选">
        <input type="button" id="btn5" value="获得选中的所有值">
        <br />
        <input type="checkbox" name="checkbox" value="checkbox1">checkbox1
        <input type="checkbox" name="checkbox" value="checkbox2">checkbox2
        <input type="checkbox" name="checkbox" value="checkbox3">checkbox3
        <input type="checkbox" name="checkbox" value="checkbox4">checkbox4
        <input type="checkbox" name="checkbox" value="checkbox5">checkbox5
        <input type="checkbox" name="checkbox" value="checkbox6">checkbox6
        <input type="checkbox" name="checkbox" value="checkbox7">checkbox7
        <input type="checkbox" name="checkbox" value="checkbox8">checkbox8
    </form>
</body>
</html>

//-->
</script>
</head>

 $("#btn1").click(function(){
  $("[name='checkbox']").attr("checked",'true');//全选
 });

复制代码 代码如下:

本文由美高梅网址发布于计算机网络,转载请注明出处:jquery数组之存放checkbox全选值示例代码,方便实用

上一篇:谷歌地图解决办法,谷歌地图打不开的解决办法 下一篇:没有了
猜你喜欢
热门排行
精彩图文