问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问table中，td的复选框全部勾选后，th中input框怎么也选中

头像
Reset
    241144
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .bgRed{
        background-color: #b2dba1;
    }
</style>
<body>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" id="checkAll"> 序号</th>
        <th>所属机构</th>
        <th>姓名</th>
        <th>手机号码</th>
    </tr>
    </thead>
    <tbody>
    <td ><input type="checkbox" name="_dataCheckBox">1</td>
    <td>山东</td>
    <td>张三</td>
    <td>15689547865</td>
    </tr>
    <tr>
        <td ><input type="checkbox" name="_dataCheckBox">2</td>
        <td>山东</td>
        <td>张三</td>
        <td>15689547865</td>
    </tr>
    </tbody>
</table>
<!--//其他行通过js中的appendto动态添加-->
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
    $("tbody tr").each(function(){
        var _this = this;
        $(this).children().slice(1).click(function(){//关键，过滤复选框所在的td的点击事件冲突
            $($(_this).children()[0]).children().each(function(){
                if(this.type=="checkbox"){
                    if(!this.checked){
                        this.checked = true;
                        $(_this).addClass("bgRed")
                    }else{
                        this.checked = false;
                        $(_this).removeClass("bgRed")
                    }
                }
            });
        });
    });
    
</script>
</html>

    image.png

    jquery前端javascripthtml
    阅读 3.2k
    3 个回答
    得票最新
    头像
    落叶
      3931338
       let num = $("tbody tr input").length;

 $("tbody tr input").on('click', function () {

 if ($("tbody tr input:checked").length == num) {

 $("thead tr input").prop("checked", true)

 } else {

 $("thead tr input").prop("checked", false)

 }

 })

 $("thead tr input").click(function () {

 $("tbody tr input").prop("checked", $(this).prop("checked"))

 })
      头像
      7nz
        3102239
        <script>
var checkedArr = [];
var allChecked = false;
$('tbody tr').each(function(index){
    checkedArr.push(false)
});

$('tbody tr').on('click', '[type="checkbox"]', function(){
    var isChecked = $(this).is(":checked");
    var tr = $(this).parent().parent();
    $(this).attr("checked", isChecked ? '' : true);
    checkedArr[tr.index()] = isChecked;
    for (var i = 0; i < checkedArr.length; i++) {
        if(checkedArr[i] === false) {
            allChecked = false;
            break;
        }
        allChecked = true;
    }
    $('#checkAll').prop("checked", allChecked ? true : false);

})

</script>
        头像
        andrewle
          4712140

          复制你的代码，选中下面两个，th中的checkbok没有选中。你的什么情况？

          查看全部 3 个回答
          推荐问题