如何在 HTML 表格中用选中的复选框替换“TRUE”，用未选中的复选框替换“FALSE”？答案

【问题标题】：如何在 HTML 表格中用选中的复选框替换“TRUE”，用未选中的复选框替换“FALSE”？
【发布时间】：2022-01-23 10:08:05
【问题描述】：

我有一个格式为的表格

代码：

  #daily {
    display: block;
    position: relative;
    background-color: #3C4AB8;
    color: white;
    border-collapse: collapse;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 80vh;
    width: 90vw;
    border: 10px solid #222A68;
    font-family: 'Roboto Mono', monospace;
    font-size: 20px;
    margin-top: 2em;
    margin-bottom: 2em;
    }


    #table thead th {
        position: sticky;
        top: 0;
    }
    
    td,
    th {
        border: solid #E3DAFF 2px;
        padding: 0.5rem;
    }
    
    th {
        position: sticky;
        top: 0;
        border-top: none;
        background: #222A68;
        top: 0;
        text-align: center;
        padding: 8px;
        text-transform: uppercase;
    }
    
    td {
        border-bottom: none;
        white-space: wrap;
    }

   <table id="daily">

            <thead>
                <tr>
                    <th class="year">year</th>
                    <th class="cutoff">cut off date</th>
                    <th class="name">Stefan</th>
                    <th></th>
                    <th class="name">Johnny</th>
                    <th></th>
                    <th class="name">Effie</th>
                    <th></th>
                    <th class="name">Karol</th>
                    <th></th>
                    <th class="name">Vardan</th>
                    <th></th>
                    <th class="name">Aman</th>
                    <th></th>
                    <th class="name">Jaspal</th>
                    <th></th>
                    <th class="name">Laurent</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-sheetdb-url="https://sheetdb.io/api/v1/xxxxxxxxx?sheet=Dashboard" data-sheetdb-sort-by="age"
                data-sheetdb-sort-order="desc">
                <tr>
                    <td id="date">{{year}}</td>
                    <td class="cutoff"><i>{{cut off date}}</i></td>
                    <td id="hours">{{Stefan}}</td>
                    <td class="checkbox">{{c1}}</td>
                    <td id="total">{{Johnny}}</td>
                    <td class="checkbox">{{c2}}</td>
                    <td id="total">{{Effie}}</td>
                    <td class="checkbox">{{c3}}</td>
                    <td id="total">{{Karol}}</td>
                    <td class="checkbox">{{c4}}</td>
                    <td id="total">{{Vardan}}</td>
                    <td class="checkbox">{{c5}}</td>
                    <td id="total">{{Aman}}</td>
                    <td class="checkbox">{{c6}}</td>
                    <td id="total">{{Jaspal}}</td>
                    <td class="checkbox">{{c7}}</td>
                    <td id="total">{{Laurent}}</td>
                    <td class="checkbox">{{c8}}</td>
                </tr>
            </tbody>
        </table>

此表使用https://sheetdb.io/ 作为后端从 Google 表格中获取一些数据。某些单元格中的值是复选框，返回“TRUE”或“FALSE”。

如何将这些值替换为在值为“TRUE”时选中而在值为“FALSE”时未选中的复选框？

谢谢！

【问题讨论】：

您可以使用checked 属性使输入显示为选中状态。我对 Angular 不是很熟悉，但是这样的事情应该会让你朝着正确的方向前进：Another resource
复选框在哪里？试过了吗？
@wazz $('.checkbox').html('<input type="checkbox">'); 确实可以用复选框输入替换所有 .checkbox 类。但是，这并不能解决我的问题。我需要“FALSE”作为未选中的复选框，“TRUE”作为选中的复选框。
问题 1) 您有多个重复的 ID。 ID必须是唯一的。
已解决window.addEventListener("sheetdb-downloaded", function() { $('.checkbox').each(function(index, el){ if (el.innerHTML.trim().toLowerCase() == 'true') { el.innerHTML = '<input class="checkbox_r" type="checkbox" checked="checked">'; } else { el.innerHTML = '<input class="checkbox_r" type="checkbox">'; } }); });

标签： javascript html jquery css

【解决方案1】：

您需要监听工作表加载事件

//Event listener for sheet loaded
window.addEventListener("sheetdb-downloaded", function () {
  //Iterate the checkbox items
  $(".checkbox").each(function () {
    //debug logging
    console.log($(this).text() == "TRUE")
    //UPdate the html based on loaded content
    $(this).html(
      `<input type="checkbox"${
        $(this).text().toUpperCase().trim() == "TRUE" ? " CHECKED" : ""
      }>`
    );
  });
});

Pen

【讨论】：

用window.addEventListener("sheetdb-downloaded", function() { $('.checkbox').each(function(index, el){ if (el.innerHTML.trim().toLowerCase() == 'true') { el.innerHTML = '<input class="checkbox_r" type="checkbox" checked="checked">'; } else { el.innerHTML = '<input class="checkbox_r" type="checkbox">'; } }); }); 解决了这个问题，但我认为你的也可以。谢谢！

【解决方案2】：

你可以使用jquery的用户prop方法

$("#yourCheckboxId").prop("checked", value)

如果值为真，则复选框将被选中，如果值为假，则复选框将被取消选中

【讨论】：

【解决方案3】：

这将枚举所有带有类复选框的 td 并用复选框替换所有 TRUE/FALSE

$("table#daily tbody td.checkbox").each(function(){
    var td = $(this);
    var txt = td.text().toUpperCase().trim();
    if (txt == "TRUE") {
        td.html('<input type="checkbox" checked>');
    }
    if (txt == "FALSE") {
        td.html('<input type="checkbox">');
    }
})

【讨论】：

这看起来很有希望，但遗憾的是没有产生任何结果。我不知道为什么 - 逻辑似乎是有道理的：/
然后在html中显示你之前拥有的和之后你需要拥有的
看看codepen here。本质上，我已经成功地用一个复选框替换了所有.checkbox 类，但这并不能真正告诉我它是TRUE 还是FALSE 值。我希望TRUE 的值有一个选中的复选框，而对于FALSE 的值，我希望有一个未选中的复选框。这可能吗？
如果您需要将检查状态转换为值为 TRUE/FALSE 的字符串，请使用此构造：val = $("#checkboxId").is(":checked") ? "TRUE" : "FALSE";