checkbox 选中一个另一个checkbox也会选中的实现代码

Jquery中用到的格局:

  1. 要落到实处的功力
    正如图所示,当点击li成分的时候,达成左侧checkbox的当选和撤回,并且监测选中订单的数量和金额变化,将数据实时绑定到红尘的“选取订单”和“金额”上面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>CheckBox select</title>
<script type='text/javascript' src='jquery-3.0.0.js'></script>
<script type='text/javascript' >
$(document).ready(function(){
/****----全选----****/
//$('#check1').on('change',function(){
//$("#check1").bind("click",function(){
$('#check1').on('click',function(){ 
//方法一
if(this.checked==true){
$('input').prop('checked',true);
}
else{
$('input').prop('checked',false);
}
if($(".do").text()=="全选"){
$(".do").text("取消"); 
}
else{
$(".do").text("全选"); 
}
//方法二
//$('input[type=checkbox]').prop('checked',$(this).prop('checked'));
}); 
/****----第一列----****/
$('#checkl1').on('click',function(){
//方法一
if(this.checked==true){
$('#check11,#check21,#check31,#check41,#check51').prop('checked',true);
}
else{
$('#check11,#check21,#check31,#check41,#check51').prop('checked',false);
}
//方法二 如上
});
/****----第二列----****/
$('#checkl2').on('click',function(){
//方法一
if(this.checked==true){
$('#check12,#check22,#check32,#check42,#check52').prop('checked',true);
}
else{
$('#check12,#check22,#check32,#check42,#check52').prop('checked',false);
}
//方法二 如上
});
/****----第三列----****/
$('#checkl3').on('click',function(){
//方法一
if(this.checked==true){
$('#check13,#check23,#check33,#check43,#check53').prop('checked',true);
}
else{
$('#check13,#check23,#check33,#check43,#check53').prop('checked',false);
}
//方法二 如上
});
/****----第四列----****/
$('#checkl4').on('click',function(){
//方法一
if(this.checked==true){
$('#check14,#check24,#check34,#check44,#check54').prop('checked',true);
}
else{
$('#check14,#check24,#check34,#check44,#check54').prop('checked',false);
}
//方法二 如上
});
/****----第一行----****/
$('#checkh1').on('click',function(){
//方法一
if(this.checked==true){
$('#check11,#check12,#check13,#check14').prop('checked',true);
}else{
$('#check11,#check12,#check13,#check14').prop('checked',false);
}
//方法二 如上
});
/****----第二行----****/
$('#checkh2').on('click',function(){
//方法一
if(this.checked==true){
$('#check21,#check22,#check23,#check24').prop('checked',true);
}else{
$('#check21,#check22,#check23,#check24').prop('checked',false);
}
//方法二 如上
});
/****----第三行----****/
$('#checkh3').on('click',function(){
//方法一
if(this.checked==true){
$('#check31,#check32,#check33,#check34').prop('checked',true);
}else{
$('#check31,#check32,#check33,#check34').prop('checked',false);
}
//方法二 如上
});
/****----第四行----****/
$('#checkh4').on('click',function(){
//方法一
if(this.checked==true){
$('#check41,#check42,#check43,#check44').prop('checked',true);
}else{
$('#check41,#check42,#check43,#check44').prop('checked',false);
}
//方法二 如上
});
/****----第五行----****/
$('#checkh5').on('click',function(){
//方法一
if(this.checked==true){
$('#check51,#check52,#check53,#check54').prop('checked',true);
}else{
$('#check51,#check52,#check53,#check54').prop('checked',false);
}
//方法二 如上
});
});
</script>
</head>
<body>
<table style="width:50%;">
<tr>
<td><input type="checkbox" id = "check1" /><label for="check1" class="do">全选</label></td>
<td><input type="checkbox" id = "checkl1" /><label for="checkl1">第一列</label></td> 
<td><input type="checkbox" id = "checkl2" /><label for="checkl2">第二列</label></td> 
<td><input type="checkbox" id = "checkl3" /><label for="checkl3">第三列</label></td> 
<td><input type="checkbox" id = "checkl4" /><label for="checkl4">第四列</label></td> 
</tr>
<tr>
<td><input type="checkbox" id = "checkh1" /><label for="checkh1">第一行</label></td>
<td><input type="checkbox" id = "check11" /></td>
<td><input type="checkbox" id = "check12" /></td>
<td><input type="checkbox" id = "check13" /></td>
<td><input type="checkbox" id = "check14" /></td>
</tr>
<tr> 
<td><input type="checkbox" id = "checkh2" /><label for="checkh2">第二行</label></td>
<td><input type="checkbox" id = "check21" /></td>
<td><input type="checkbox" id = "check22" /></td>
<td><input type="checkbox" id = "check23" /></td>
<td><input type="checkbox" id = "check24" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh3" /><label for="checkh3">第三行</label></td>
<td><input type="checkbox" id = "check31" /></td>
<td><input type="checkbox" id = "check32" /></td>
<td><input type="checkbox" id = "check33" /></td>
<td><input type="checkbox" id = "check34" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh4" /><label for="checkh4">第四行</label></td>
<td><input type="checkbox" id = "check41" /></td>
<td><input type="checkbox" id = "check42" /></td>
<td><input type="checkbox" id = "check43" /></td>
<td><input type="checkbox" id = "check44" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh5" /><label for="checkh5">第五行</label></td>
<td><input type="checkbox" id = "check51" /></td>
<td><input type="checkbox" id = "check52" /></td>
<td><input type="checkbox" id = "check53" /></td>
<td><input type="checkbox" id = "check54" /></td>
</tr>
</tbody>
</table>
</body>
</html>

让checkbox不选中将在选中的checkbox不选中,让checkbox选中

昨天在做项目标时候,蒙受贰个主题材料。需求把选中的checkbox置空,将在选中的checkbox不选中。最后,开采三个格局很好使,特此记录。

$("input[type='checkbox']").each(function(){
if(this.checked){
this.checked=false;
}
});

原理:循环每二个type为checkbox的input,若其是选中状态,就将她的checked属性置为false就ok了。

自然,若要实现行反革命选的功效,再加一点就好了。代码如下:

$("input[type='checkbox']").each(function(){
if(this.checked){
this.checked=false;
}

if(!(this.checked)){
this.checked=true;
}
});

纵然checkbox1被入选,则checkbox2 也入选 怎么用jQuery达成,代码如下,感谢
图片说明




first():第3个要素;

![](https://upload-images.jianshu.io/upload_images/1918644-2aa3d1f398dd2d24.png)

1.png

效果图

怎命令多少个checkbox都不被选中

把您要调整的享有checkbox 的name 属性设置为同三个名字,假使AA
js中写如下代码
var boxes =document.getElementByName(‘AA’);

for(var i=0;i<boxes.length;i++)
{
boxes[i].checked=false
}
 

nextAll():在XX之后的全部因素:首要为了把第一行的表头去掉

  1. dom结构
    strVar += “<li class=”mui-table-view-cell” data-flag = “0”
    onclick=”onListClick(this)”>”;
    strVar += “<a class=”mui-navigate-right”>”;
    strVar += “<div class=”mui-checkbox mui-pull-left
    checkboxArea”>”;
    strVar += “<input name=”checkbox” value=”” type=”checkbox”
    data='”+JSON.stringify(temp)+”‘>”;
    strVar += “</div>”;
    strVar += “<div class=”mui-pull-right tixianInfo” >”;
    strVar += “<p class=”orderByInfo mui-clearfix”>”;
    strVar += “<span class=”orderByName
    mui-pull-left”>”+temp.ShareClientName+”</span>”;
    strVar += “<span class=”orderTime
    mui-pull-right”>”+temp.AddTime.split(‘ ‘)[0]+”</span>”;
    strVar += “</p>”;
    strVar += “<p class=”proInfo”>”;
    strVar += “<span
    class=”ProName”>”+temp.ProName+”</span>”;
    strVar += “<span
    class=”proPrice”>¥”+temp.TrueTotal+”</span>”;
    strVar += “<span
    class=”proCount”>x”+temp.Number+”</span>”;
    strVar += “</p>”;
    strVar += “<p
    class=”orderTiCheng”>此订单得到提成:¥”+temp.Money+”</p>”;
    strVar += “</div>”;
    strVar += “</a>”;
    strVar += “</li>”;

  2. js部分
    //observeChange用来监测checkbox的change事件,并开展逻辑管理
    function observeChange(){
    var list = document.getElementById(‘list’);
    //监测全体inputcheckbox)的扭转
    mui(‘#list’).on(‘change’,’input’,function(){
    //选中的checkbox的数量
    var checkedbox =
    list.querySelectorAll(‘input[type=”checkbox”]:checked’);
    var count = checkedbox.length;
    //将当选的checkbox的数额赋值给尾部的挑三拣四订单
    orderCount.innerHTML = count;//orderCount即为’选用订单’

             var totalMoney = 0;
             //该数组用来存储选中订单的订单号
             SelectIDSArray = [];
             for(var i = 0;i<checkedbox.length;i++){
                 var item = checkedbox[i];
                 //item是通过ajax从后台请求的订单数据,该数据为JSON数据。
                 var obj = JSON.parse(item.getAttribute('data'));
    
                 //将选中的订单ID存储起来
                 SelectIDSArray.push(obj.OrderNum);
                 totalMoney += parseFloat(obj.Money);
             }
             tixianMoney.innerHTML = '¥'+totalMoney.toFixed(2);      
          });
     }
    
     //onListClick用来手动触发checkbox的change事件,切换checkbox的选中和取消
     function onListClick(obj){
         var flag = obj.getAttribute('data-flag');
         if(flag == 0){
             $(obj).find('input')[0].checked = true;
             obj.setAttribute('data-flag',1);
    
             $($(obj).find('input')[0]).trigger('change');
         }else{
             $(obj).find('input')[0].checked = false;
             obj.setAttribute('data-flag',0);
             $($(obj).find('input')[0]).trigger('change');
         }
     }
    

图片 1

‘checkbox’不选中时赋值,怎完毕?

看你的checkbox鲜明是网页上的控件,笔者只晓得在jquery中,可以利用
if($(“#xxx”).attr(“checked”)==true)//xxx是控件的ID{ alert(‘1’);}else{
alert(‘0’);}用来判别多个checkbox是或不是选中了。这么些主题素材的精神也正是剖断三个checkbox是或不是选中,再依规范保存0只怕1。
 

今日在做项目标时候,遇到一个标题。供给把选中的checkbox置空,将要选中的checkb…

children():查找子成分; 

如上所述是笔者给大家介绍的checkbox
选中三个另贰个checkbox也会选中的落实代码的漫天描述,希望对大家持有帮忙,假如我们想领悟更加多内容特邀关心解本之家!

toggleClass();切换样式

您恐怕感兴趣的篇章:

  • 依赖JQuery完结CheckBox全选全不选
  • jQuery操作checkbox选择(list/table)
  • jquery
    checkbox完结单选小例
  • JQuery限制复选框checkbox可选中个数的主意
  • jQuery达成table中两列CheckBox只可以选中二个的演示

attr():给CheckBox添加checked属性;

重要达成的代码:

        $(function () {
            //除了表头(第一行)以外全数的行增加click事件.
            $(“tr”).first().nextAll().click(function () {
               
//为点击的这一行切换样式bgRed里的代码:background-color:#FF0000;
                $(this).children().toggleClass(“bgRed”);
                //推断td标识的背景颜色和body的背景颜色是还是不是一样;
                if ($(this).children().css(“background-color”) !=
$(document.body).css(“background-color”)) {
                    //假若同样,CheckBox.checked=true;
                   
$(this).children().first().children().attr(“checked”, true);

                } else {
                    //借使差别,CheckBox.checked=false;
                   
$(this).children().first().children().attr(“checked”, false);
                }
            });
       });

: first():第二个成分;
nextAll():在XX之后的有着因素:首要为了把第一行的表头去掉
children():查找子成分; toggleClass();切换样式…

发表评论

电子邮件地址不会被公开。 必填项已用*标注