记录下Jquery复选框的选中实现

版权声明:本文为博主原创文章,未经博主允许不得转载。否则,吔屎伺候。 https://blog.csdn.net/guowujun321/article/details/80774338
/**
	 * 父级复选框:input内加入 parent-check
	 * 子级复选框:input内加入 child-check
	 */
	$("[parent-check]").bind("click",function() {
            if (this.checked) {
                $("[child-check]").prop("checked", true);
            } else {
                $("[child-check]").prop("checked", false);
            }
        });
	$("[child-check]").bind("click",function(){
		if (!this.checked){
		    $("[parent-check]").prop("checked", false);
		} else {
		    var i = 0;
		    $("[child-check]").each(function(){    
                        if($(this).is(":checked")) {    
                            i = i + 1;  
                        }
                    });
		    var trLength = $("tbody").find("tr").length;
		    if (i == trLength){
			    $("[parent-check]").prop("checked", true);
		    }
	    }
	});

应用场景如下图:

html代码
<tr>
    <th>
        <input type="checkbox" parent-check />
    </th>
</tr>
<tbody>
<tr>
    <td>
        <input type="checkbox" child-check />
    </td>
</tr>
</tbody>

全勾选子复选框时,父级复选框自动勾选。

猜你喜欢

转载自blog.csdn.net/guowujun321/article/details/80774338
今日推荐