第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在用戶單擊復(fù)選框所在的行時切換復(fù)選框?

如何在用戶單擊復(fù)選框所在的行時切換復(fù)選框?

我有一個有 2 列的表格,第一列顯示文本,另一列有一個復(fù)選框。代碼如下,復(fù)選框由JavaScript生成,例如 var checkbox = document.createElement("input");<script type="text/javascript">      function create_table() {       var data = ["Sandwidch", "Hamburger", "Bacon"];       var table = document.getElementById("menu");       for (var option in data) {          var row = table.insertRow(-1);          var cell1 = row.insertCell(0);          cell1.innerHTML = data[option];          var cell2 = row.insertCell(1);          var checkbox = document.createElement("input");          checkbox.type = "checkbox";          checkbox.name = "choiceCbx";          cell2.appendChild(checkbox);        }      }      window.onload = create_table;</script><body>    <table id="menu">        <tr>           <th>Food</th>           <th>Choice</th>        </tr>    </table></body>當(dāng)用戶點擊表格中的某一行時,如果該行上的復(fù)選框被選中,它應(yīng)該變?yōu)槲催x中,反之亦然。我使用以下代碼來切換復(fù)選框但徒勞無功,它似乎只檢測到“TH”行,而不是“TR”行:$(document).ready(function() {  $('#menu tr').click(function(event) {    if (event.target.type !== 'checkbox') {      $(':checkbox', this).trigger('click');    }  });});我應(yīng)該如何修改我的代碼以使切換功能起作用?
查看完整描述

2 回答

?
喵喵時光機

TA貢獻1846條經(jīng)驗 獲得超7個贊

你可以這樣做...


const table_foods = document.querySelector('#records tbody')


table_foods.onclick=e=>

  {

  if (e.target.matches('input[type=checkbox]')) return  // to not disturb  natural check action

  let chkBx = e.target.closest('tr').querySelector('input[type=checkbox]')

  chkBx.checked = !chkBx.checked  

  }

 /* cosmetic part */


table {

  border-collapse: collapse;

  margin-top: 25px;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 14px;

  } 

thead {

  background-color: aquamarine;

  }

tbody {

  background-color: #b4c5d8;

}

td, th {

  border: 1px solid grey;

  padding: .3em .7em;

}

<table id="records" class="content">

  <thead>

    <tr> <th>Food</th> <th>Choice</th> </tr>

  </thead>

  <tbody>

    <tr>

      <td>Sandwitch</td>

      <td><input type="checkbox" name="answerCbx-1" /></td>

    </tr>

    <tr>

      <td>pizza</td>

      <td><input type="checkbox" name="answerCbx-2" /></td>

    </tr>

  </tbody>

</table>


查看完整回答
反對 回復(fù) 2022-10-21
?
陪伴而非守候

TA貢獻1757條經(jīng)驗 獲得超8個贊

嘗試這個。此外,您可能想為您的問題添加更多詳細信息,因為 HTML 不包含任何復(fù)選框

https://forum.jquery.com/topic/toggle-checkboxes-in-a-table-after-click-function


查看完整回答
反對 回復(fù) 2022-10-21
  • 2 回答
  • 0 關(guān)注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號