js中的checkbox问题

Question

我想要写个onChangeSelect(id)函数，当全选框选中时，判断下面的checkbox，如果有某个checkbox没有选中则全选框也不选中，如果所有的checkbox都选中了，那么全选框也自动选中该怎么写呢？请高手教教我吧

Answer 1

思路如下：给子复选框添加单击事件，每次单击，都判断所有的复选款是否选中，选中即父复选框选中，若没有，则取消选中状态具体代码实现，看看你是用啥JS写的，我现在用纯javascript写的，没有用框架的，你需要吗？-[喽水把子]

Answer 2

1.给所有的子复选框name一样，单击事件一样
2.document.getElementByName(复选框name)    这获取出所有子复选框
3.循环所有复选框，检测每个复选框的 checked 状态，若有一个没选中，则直接break，反之，若循环到最后还没有break，则给父复选框选中
4.至于父复选框的单击事件，也可以用这个循环复制来搞定
子复选款的checked=父复选框的checked

Answer 3

 //是否选择
 function check(){
   var input = document.getElementsByTagName("input");
   for(var i = 0; i < input.length; i ++)
      {
               if(input[i].type == "checkbox" )
                {
                  if (input[i].checked)
                  {
document.getElementById("transfer").disabled = false;
 //$(".transfer").show();
                        break;
 }else{
  document.getElementById("transfer").disabled = true;
  //$(".transfer").hide();
 }
       }
      }
 }

Answer 4

思路如下：给子复选框添加单击事件，每次单击，都判断所有的复选款是否选中，选中即父复选框选中，若没有，则取消选中状态具体代码实现，看看你是用啥JS写的，我现在用纯javascript写的，没有用框架的，你需要吗？-[喽水把子]
太需要了。

Answer 5

$(function() {
    $("input[type=checkbox]").bind("click",function() {
       if($(this).attr("id")==="all") {
            $("input[type=checkbox]").attr("checked",$(this).attr("checked"));
       } else {
       if($("input[type=checkbox]:checked:not('#all')").size()>=$("input[type=checkbox]").size()-1) {
            $("#all").attr("checked",true);
       }
       else {
            $("#all").attr("checked",false);
       }
       
       }
           
    });
});

Answer 6

<input type="checkbox" name="a" value="1">
<input type="checkbox" name="a" value="2">
<input type="checkbox" name="a" value="3">
<input type="checkbox" name="a" value="4">
<input type="checkbox" name="all" value=""> 全选
<script type="text/javascript">
    var a=document.getElementsByName("a");
    var all=document.getElementsByName("all")[0];
    for(var i=0;i< a.length;i++){
        a[i].onclick=function(){fun()}
    }
    function fun(){
        var temp=true;
        for(var i=0;i< a.length;i++){
            temp=temp&&a[i].checked;
        }
        all.checked=temp;
    }
    all.onclick=function(){
        for(var i=0;i< a.length;i++){
            a[i].checked=this.checked;
        }
    }
</script>

Answer 7

<input type="checkbox" value="selAll" id="selAll">全选 <input type="checkbox" value="apple" id="apple" name="ck">苹果
<input type="checkbox" value="egg" id="egg" name="ck">鸡蛋
<input type="checkbox" value="orange" id="orange" name="ck">桔子

        //普通复选框
$("[name=ck]").click(function(){
if($("[name=ck]").length == $("[name=ck]:checked").length){
$("#selAll").attr("checked",true);
}else{
$("#selAll").attr("checked",false);
}
}); //全选
$("#selAll").click(function(){
$("[name=ck]").attr("checked",this.checked);
});

Answer 8

谢谢你，我还想问个问题。function init() {
for(var i=0; i<data.length; i++) {
data[i]['id'] = ++seq;
data[i]['isNew'] = false;
drawUser(data[i]);
}
} function addUser() {
var user = {id : ++seq, name : '', birthday : '', gender : 'M', isNew : true};
data[data.length] = user;
drawUser(user);
} function drawUser(user) {
var html = '<tr id="row_'+user['id']+'">';
if(document.getElementById("checkAll").checked==true){
html += '<td><input type="checkbox" name="selectBox" value="'+user['id']+'"  ></td>';
document.getElementById("checkAll").checked = false;
}
else{
html += '<td><input type="checkbox" name="selectBox" value="'+user['id']+'"  ></td>';
}
if(user['isNew']) {
html += '<td><input type="text" id="name1"  name="name" value=""></td>';
html += '<td><input type="text"  id="birthday1"  name="birthday" value=""></td>';
html += '<td><input type="radio"  id="radio1"  name="gender_'+user['id']+'" value="M" checked="checked"> 男 <input type="radio" id="radio2"  name="gender_'+user['id']+'" value="F"> 女</td>';
html += '<td><input type="button"  id="save" value="保存" onclick="javascript:saveUser('+user['id']+');">&nbsp;&nbsp;<input type="button" value="取消" onclick="javascript:cancelEditUser('+user['id']+');"></td>';
} else {
html += '<td>'+user['name']+'</td>';
html += '<td>'+user['birthday']+'</td>';
html += '<td>'+(user['gender'] == 'M' ? '男' : '女') +'</td>';
html += '<td><input type="button"  id="change" value="修改" onclick="javascript:editUser('+user['id']+');"></td>';
}
html += '</tr>';
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.innerHTML = tbody.innerHTML + html;
}我每点一次添加都会重画整个表格，所有的复选框重画都没选中。怎么写才能记住之前的复选框的状态呢？

Answer 9

if(document.getElementById("checkAll").checked==true){
html += '<td><input type="checkbox" name="selectBox" value="'+user['id']+'"  ></td>';
document.getElementById("checkAll").checked = false;
}
else{
html += '<td><input type="checkbox" name="selectBox" value="'+user['id']+'"  ></td>';
}
改成：
html += '<td><input type="checkbox" name="selectBox" '+(document.getElementById("checkAll").checked?'checked':'')+' value="'+user['id']+'"  ></td>';

Answer 10

哦，这意思呀。
如果非要这样做，那么你应该对每个复选框是否选中用变量保存下来（复杂）。
你生成过程不对，添加应该只增加一行tr即可，已经存在的不要动：
    function drawUser(user) {
        var html = '';
        if(document.getElementById("checkAll").checked==true){
            html += '<td><input type="checkbox" name="selectBox" value="'+user['id']+'"  ></td>';
            document.getElementById("checkAll").checked = false;
        }
        else{
            html += '<td><input type="checkbox" name="selectBox" value="'+user['id']+'"  ></td>';
        }
        if(user['isNew']) {
            html += '<td><input type="text" id="name1"  name="name" value=""></td>';
            html += '<td><input type="text"  id="birthday1"  name="birthday" value=""></td>';
            html += '<td><input type="radio"  id="radio1"  name="gender_'+user['id']+'" value="M" checked="checked"> 男 <input type="radio" id="radio2"  name="gender_'+user['id']+'" value="F"> 女</td>';
            html += '<td><input type="button"  id="save" value="保存" onclick="javascript:saveUser('+user['id']+');">&nbsp;&nbsp;<input type="button" value="取消" onclick="javascript:cancelEditUser('+user['id']+');"></td>';
        } else {
            html += '<td>'+user['name']+'</td>';
            html += '<td>'+user['birthday']+'</td>';
            html += '<td>'+(user['gender'] == 'M' ? '男' : '女') +'</td>';
            html += '<td><input type="button"  id="change" value="修改" onclick="javascript:editUser('+user['id']+');"></td>';
        }
        //html += '</tr>';
        var b=document.createElement("tr");
        b.id='row_'+user['id'];
        b.innerHTML=html;
        var table = document.getElementsByTagName("table")[0];
        var tbody = table.getElementsByTagName("tbody")[0];
        tbody.appendChild(b);
    }

Answer 11

真的ok了！！！刚学，对javascript真不是太清楚，太太太感谢你了