Jquery 取消选中带有“属性”的表中的复选框；勾选“；

我正在创建一个带有复选框的表，我想将状态（选中/取消选中）作为checkbox input html类中的一个属性。到目前为止，我只能检查它，但我不能取消选中它，因为该行

$（this.find（“.checkbox input”）.prop（“checked”、“checked”）

似乎没有为我的复选框输入设置任何内容

我做错什么了吗？我是新手，因为我不是前端工程师。感谢您的帮助


$（“.checkbox action”）。单击（函数（）{
if（！$（this）.find（“.checkbox输入”）.prop（“选中”））{
$（this.find（“i”）.css（{“display”：“inline block”}）；
$（this.find（“.checkbox”）.addClass（“checkbox checked”）；
if（$（this.prop（“标记名”）.toLowerCase（）=“td”）{
$（this.parent（）.addClass（“选定的bg”）；
}
否则{
$（“table”）.find（“i”）.css（{“display”：“inline block”}）；
$（“表”）.find（“.checkbox”）.addClass（“checkbox checked”）；
$（“tr”）.addClass（“选定bg”）；
$（“.first row”）.removeClass（“选定的bg”）；
}
$（this.find（“.checkbox input”）.prop（“选中”、“选中”）；
}
否则{
if（$（this.prop（“标记名”）.toLowerCase（）=“td”）{
$（this.parent（）.removeClass（“选定的bg”）；
}
}
});
表格{
边界间距：0；
边界塌陷：塌陷；
字体大小：13px；
显示：块；
溢出-x：滚动！重要；
空白：nowrap；
颜色：#333；
}
第一排{
边框底部：实心2px#c4c4；
}
td，th{
文本对齐：左对齐；
高度：40px；
左侧填充：12px；
右侧填充：12px；
}
th{
字号：700；
}
.备用bg{
背景色：#F8；
}
.选定背景{
背景色：#CAF1FF；
}
td.icon{
文本对齐：居中；
}
我{
字体大小：14px；
颜色：#333；
光标：指针；
}
.图标一：悬停{
颜色：#00c983；
}
.fa排序{
左边距：8px；
}
.钱{
文本对齐：右对齐；
}
.历史{
颜色：#0099ff；
文字装饰：下划线；
}
钮扣{
高度：32px；
宽度：48px；
保证金权利：4px；
边界半径：3px；
边界：无；
盒影：0px 3px 6px 0 rgba（0,0,0,0.15）；
}
按钮一{
颜色：#fff；
线高：20px！重要；
}
格林先生{
背景色：#00c983；
}
瑞德先生{
背景色：#FF7979；
}
.桌上活动{
左侧填充：6px；
右边填充：6px；
文本对齐：居中；
}
.表格动作输入{
不透明度：0；
位置：相对位置；
}
.复选框{
宽度：16px；
高度：16px；
边框：实心1px#c4c4；
边界半径：2px；
显示：内联块；
左边距：-16px；
边缘顶部：6px；
光标：指针；
}
.复选框已选中{
边框：实心1px#00c983；
}
.复选框输入{
光标：指针；
}
.复选框i{
颜色：#00c983；
显示：无；
}
.复选框一：悬停{
颜色：#00c983；
}
第一个孩子，
td：第一个孩子{
左侧填充：24px；
右边填充：10px；
}
.最后一次行动{
右边填充：16px；
}
：-webkit滚动条{
-webkit外观：无；
宽度：8px；
高度：8px；
}
：-webkit滚动条拇指{
边界半径：5px；
背景色：rgba（0,0,0,25）；
-webkit盒阴影：0 1px rgba（255255255.5）；
}
$（“.checkbox action”）。单击（函数（）{
console.log（$（this.find（'input[type=“checkbox-input”]'））.prop（“checked”））
if（！$（this）.find（'input[type=“checkbox input”]'）.prop（“checked”））{
$（this.find（“i”）.css（{“display”：“inline block”}）；
$（this.find（“.checkbox”）.addClass（“checkbox checked”）；
if（$（this.prop（“标记名”）.toLowerCase（）=“td”）{
$（this.parent（）.addClass（“选定的bg”）；
}
否则{
$（“table”）.find（“i”）.css（{“display”：“inline block”}）；
$（“表”）.find（“.checkbox”）.removeClass（“checkbox checked”）；
$（“tr”）.addClass（“选定bg”）；
$（“.first row”）.removeClass（“选定的bg”）；
}
$（this）.find（'input[type=“checkbox-input”]'）.prop（“checked”，true）；
}
否则{
$（this）.find（'input[type=“checkbox-input”]'）.prop（“checked”，false）；
$（this.find（“i”）.css（{“display”：“none”}）；
$（this.find（“.checkbox”）.removeClass（“checkbox checked”）；
if（$（this.prop（“标记名”）.toLowerCase（）=“td”）{
$（this.parent（）.removeClass（“选定的bg”）；
}
否则{
$（“table”）.find（'span.checkbox'）.find（“i”）.css（{“display”：“none”}）；
$（“表”）.find（“.checkbox”）.removeClass（“checkbox checked”）；
$（“tr”）.removeClass（“选定bg”）；
$（“.first row”）.removeClass（“选定的bg”）；
}
}
});
表格{
边界间距：0；
边界塌陷：塌陷；
字体大小：13px；
显示：块；
溢出-x：滚动！重要；
空白：nowrap；
颜色：#333；
}
第一排{
边框底部：实心2px#c4c4；
}
td，th{
文本对齐：左对齐；
高度：40px；
左侧填充：12px；
右侧填充：12px；
}
th{
字号：700；
}
.备用bg{
背景色：#F8；
}
.选定背景{
背景色：#CAF1FF；
}
td.icon{
文本对齐：居中；
}
我{
字体大小：14px；
颜色：#333；
光标：指针；
}
.图标一：悬停{
颜色：#00c983；
}
.fa排序{
左边距：8px；
}
.钱{
文本对齐：右对齐；
}
.历史{
颜色：#0099ff；
文字装饰：下划线；
}
钮扣{
高度：32px；
宽度：48px；
保证金权利：4px；
边界半径：3px；
边界：无；
盒影：0px 3px 6px 0 rgba（0,0,0,0.15）；
}
按钮一{
颜色：#fff；
线高：20px！重要；
}
格林先生{
背景色：#00c983；
}
瑞德先生{
背景色：#FF7979；
}
.桌上活动{
左侧填充：6px；
右边填充：6px；
文本对齐：居中；
}
.表格动作输入{
不透明度：0；
位置：相对位置；
}
.复选框{
宽度：16px；
高度：16px；
边框：实心1px#c4c4；
边界半径：2px；
显示：内联块；
左边距：-16px；
边缘顶部：6px；
光标：指针；
}
.复选框已选中{
边框：实心1px#00c983；
}
.复选框输入{
光标：指针；
}
.复选框i{
颜色：#00c983；
显示：无；
}
.复选框一：悬停{
颜色：#00c983；
}
第一个孩子，
td：第一个孩子{
衬垫
<table id="listTable">
    <tr class="first-row">
        <th class="table-action checkbox-action"><input type="checkbox" id="chkBoxMain" checked><span class="checkbox"><i class="fas fa-check"></i></span></th>
        <th class="table-action">Edit</th>
        <th class="table-action table-action-last">View</th>
        <th>Request No.<i class="fas fa-sort"></i></th>
        <th>Employee ID<i class="fas fa-sort"></i></th>
        <th>Employee Name<i class="fas fa-sort"></i></th>
        <th>Claim For<i class="fas fa-sort"></i></th>
        <th>Family Member<i class="fas fa-sort"></i></th>
        <th>Item<i class="fas fa-sort"></i></th>
        <th>Request Date<i class="fas fa-sort"></i></th>
        <th>Receipt Date<i class="fas fa-sort"></i></th>
        <th>Total Claim</th>
        <th>History</th>
    </tr>
    <tr class="alternate-bg">
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/TRAVEL/04/005</td>
        <td>EMP004</td>
        <td>I Putu Yudi Haryasa</td>
        <td>Employee</td>
        <td>-</td>
        <td>Transport</td>
        <td>4 May 2018</td>
        <td>1 May 2018</td>
        <td class="money">300,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr>
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/MEDICAL/04/004</td>
        <td>EMP005</td>
        <td>Daniel Giovanni Gunawan</td>
        <td>Employee</td>
        <td>-</td>
        <td>Kacamata</td>
        <td>4 May 2018</td>
        <td>25 Apr 2018</td>
        <td class="money">550,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr class="alternate-bg">
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/MEDICAL/04/003</td>
        <td>EMP006</td>
        <td>Muhammad Nadzeri Munawar</td>
        <td>Family</td>
        <td>Nadzira - First Child</td>
        <td>Rawat Inap</td>
        <td>3 May 2018</td>
        <td>28 Apr 2018</td>
        <td class="money">4,500,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr>
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/MEDICAL/03/002</td>
        <td>EMP007</td>
        <td>Glenn Kristanto</td>
        <td>Family</td>
        <td>Kristanti - First Child</td>
        <td>Rawat Jalan</td>
        <td>2 May 2018</td>
        <td>25 Apr 2018</td>
        <td class="money">3,000,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
    <tr class="alternate-bg">
        <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
        <td class="icon table-action"><i class="fas fa-pencil-alt"></i></td>
        <td class="icon table-action table-action-last"><i class="fas fa-eye"></i></td>
        <td>REI/TRAVEL/03/001</td>
        <td>EMP008</td>
        <td>Hendryanto Fudiko</td>
        <td>Employee</td>
        <td>-</td>
        <td>Transport</td>
        <td>2 May 2018</td>
        <td>23 Apr 2018</td>
        <td class="money">150,000.00</td>
        <td class="history"><a href="#">See detail</a></td>
    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

    $(document).ready(function () {


        ToggleChecked();

    });

    function ToggleChecked() {




        $('#chkBoxMain').click(function () {

            var checked = $("#chkBoxMain").prop("checked");

            if(checked == true){


                $(".checkbox-input").each(function(){

                    $(this).prop("checked",true);
                    //put your styles here
                })


            }
            else {

                $(".checkbox-input").each(function () {

                    $(this).prop("checked", false);

                    //put your styles here
                })


            }

        });




    }




</script>