js简单购物车全选小例子

6666

*html部分
<table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id='j_tb'>
            <tr>
                <td>
                    <input type="checkbox" > 
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" > 
                </td>
                <td>huawei</td>
                <td>6000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" > 
                </td>
                <td>xiaomi</td>
                <td>3000</td>
            </tr>
        </tbody>
    </table>
*js部分
var j_cbAll=document.getElementById('j_cbAll');
        var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick=function(){
            for(var i=0;i<j_tbs.length;i++){
                j_tbs[i].checked=j_cbAll.checked;
            }
        }
        for(var i=0;i<j_tbs.length;i++){
            j_tbs[i].onclick=function(){
                var flag=true;
                for(var j=0;j<j_tbs.length;j++){
                    if(!j_tbs[j].checked){
                        j_cbAll.checked=0;
                        flag=false;
                        break;
                    }
                }
                if(flag){
                   j_cbAll.checked=true;
                }
            }
        }

效果图:
1.点击全选

2.取消任意一个复选框全选不选中

H5规定自定义属性名必须加 data-xxxxx 获取属性名则为 元素.dataset.xxxxx()

<div data-index='1' data-one='66'></div>
document.querySelector('div').dataset//可以获取div对象中的所有自定义对象数组集合
document.querySelector('div').dataset.index
document.querySelector('div').dataset.['index']