Question

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

$(this).find(".checkbox-input").prop("checked", "checked");

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

我做错了什么吗？我是新手，因为我不是前端工程师。任何帮助表示赞赏！

$(".checkbox-action").click(function() {
  if (!$(this).find(".checkbox-input").prop("checked")) {
    $(this).find("i").css({"display": "inline-block"});
    $(this).find(".checkbox").addClass("checkbox-checked");  
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().addClass("selected-bg");  
    }
    else {
      $("table").find("i").css({"display": "inline-block"});
      $("table").find(".checkbox").addClass("checkbox-checked"); 
      $("tr").addClass("selected-bg"); 
      $(".first-row").removeClass("selected-bg"); 
    }
    $(this).find(".checkbox-input").prop("checked", "checked");
  }
  else {
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().removeClass("selected-bg");  
    }
  }
});

table {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll !important;
  white-space: nowrap;
  color: #333;
}

tr.first-row {
  border-bottom: solid 2px #c4c4c4;
}

td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg {
  background-color: #CAF1FF;
}

td.icon {
  text-align: center; 
}

i {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.fa-sort {
  margin-left: 8px;
}

.money {
  text-align: right;
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #c4c4c4;
  border-radius: 2px;
  display: inline-block;
  margin-left: -16px;
  margin-top: 6px;
  cursor: pointer;
}

.checkbox-checked {
  border: solid 1px #00c983;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

th:first-child,
td:first-child {
  padding-left: 24px;
  padding-right: 10px;
}

.table-action-last {
  padding-right: 16px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.25);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Answer 1

＆＃13;

$(".checkbox-action").click(function() {
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("tagName").toLowerCase() == "td") {
      $(this).parent().addClass("selected-bg");  
    }
    else {
      $("table").find("i").css({"display": "inline-block"});
      $("table").find(".checkbox").removeClass("checkbox-checked");
      
      $("tr").addClass("selected-bg"); 
      $(".first-row").removeClass("selected-bg"); 
    }
    $(this).find('input[type="checkbox-input"]').prop("checked", true);
  }
  else {
  $(this).find('input[type="checkbox-input"]').prop("checked", false);
   
    $(this).find("i").css({"display": "none"});
    $(this).find(".checkbox").removeClass("checkbox-checked");
    
    if ($(this).prop("tagName").toLowerCase() == "td") {
      $(this).parent().removeClass("selected-bg");  
    }
    else {
      $("table").find('span.checkbox').find("i").css({"display": "none"});
      $("table").find(".checkbox").removeClass("checkbox-checked");
      
      $("tr").removeClass("selected-bg"); 
      $(".first-row").removeClass("selected-bg"); 
    }
  }
});

＆＃13;

table {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll !important;
  white-space: nowrap;
  color: #333;
}

tr.first-row {
  border-bottom: solid 2px #c4c4c4;
}

td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg {
  background-color: #CAF1FF;
}

td.icon {
  text-align: center; 
}

i {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.fa-sort {
  margin-left: 8px;
}

.money {
  text-align: right;
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #c4c4c4;
  border-radius: 2px;
  display: inline-block;
  margin-left: -16px;
  margin-top: 6px;
  cursor: pointer;
}

.checkbox-checked {
  border: solid 1px #00c983;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

th:first-child,
td:first-child {
  padding-left: 24px;
  padding-right: 10px;
}

.table-action-last {
  padding-right: 16px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.25);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

＆＃13;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<table>
  <tr class="first-row">
    <th class="table-action checkbox-action"><input type="checkbox-input"><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-input"><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-input" ><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-input"><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-input"><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-input" ><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>

＆＃13;

试试这个。你错了更多的东西。检查一下自己

Answer 2

您的Html需要稍微更新一下：

将复选框的类型更改为复选框，而不是复选框输入。
将id设为顶部复选框，以执行所有切换。例如我将它命名为chkBoxMain
给出您希望切换名为checkbox-input。

看看我下面的jquery。

<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>

取消选中表格中的复选框，其属性为“已选中”

2 个答案: