根据单选按钮选择显示/隐藏 HTML 表格列答案

【问题标题】：Show/Hide HTML table column based on radio button selection根据单选按钮选择显示/隐藏 HTML 表格列
【发布时间】：2018-01-01 06:30:53
【问题描述】：

我有一个 HTML 表，它显示来自数据库的三种不同 MySQL 条件的数据。我想为一个单选选项隐藏一列。我环顾四周，但没有达到重点。任何建议或帮助将不胜感激。

这是显示数据的 HTML 表格

<thead>
  <tr>
  <th>S.No.</th>
  <th>Email ID</th>
  <th>SBI Employee ID</th>
  <th>Name</th>
  <th>Mobile No.</th>
  <th>Date of Birth</th>
  <th>Registration Date</th>
  <th>Check for Approval 
       <input type="checkbox" id="select_all" name="all_check[]" <?php echo $disabled ;?> class="checkbox" value= "<?php echo $row['id']; ?>"> </th></tr>
 </thead>

现在我的 MySQL 查询为，

switch ($users)
        {
        case "all":
          $sqlQuery = "SELECT * FROM tbl_user WHERE type =3";
        break;
        case "approved":
           $sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =1";
        break;
        case "unapproved":
          $sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =0";
        break;
      }

现在是收音机，

 <input type='radio'  name='users' value='unapproved' <?php if (isset($_POST['users']) && $_POST['users'] == 'unapproved')  echo ' checked="checked"';?> checked /> Unapproved Candidates<br> 
          <input type='radio'  name='users' value='approved' <?php if (isset($_POST['users']) && $_POST['users'] == 'approved') echo ' checked="checked"';?> / > Approved Candidates<br>
          <input type='radio' id='show' name='users' value='all'  <?php if (isset($_POST['users']) && $_POST['users'] == 'all')  echo ' checked="checked"';?> /> All Candidates<br><br> 
          <input type="submit" value="submit" id="submit"><br><br>

我想要做的是隐藏“所有候选人”单选选择的“检查批准”列，并将其中的复选框字段显示为禁用“批准的用户”选择。我是 php 新手，但我仍然想知道这一点，因为我知道它只能由 jquery 完成。请原谅我在这里提出的错误，但正在寻找解决方案。谢谢

【问题讨论】：

dotnetcurry.com/jquery/1122/… 看看这个例子。
@Deepa 感谢您的关注。但我见过这个和其他例子，但是用单选按钮+提交按钮，情况不同。
请检查：有单选按钮的例子。 stackoverflow.com/questions/33763439/…
@Deepa 是的 .. 刚刚检查过 .. 但它所做的是选择收音机。正如我在上面的代码中提到的，我的选择与单选和提交按钮一起使用。所以这不适用于代码。 :(

标签： php jquery checkbox radio-button

【解决方案1】：

您的解决方案可以很简单JavaScript，不一定是JQuery。

已更新：Live fiddle - updated（用于持续更新 DOM）

这是Live fiddle 解决方案的演示（更改用户值以查看结果）

或者只是检查代码：

<!-- put this at the end, before </body> -->
<script>
// set users via PHP
var users = "<?php if (isset($_POST['users'])) echo $_POST['users']; ?>";
// update the HTML without interfering with other scripts
(function(users){
  // check if PH
  if (users.length) {
    // update the radio option...
    var inputTag = document.querySelector('input[value="'+users+'"]');
    if (inputTag)
      inputTag.checked = true;
    // if users is "all"
    // hide the last TD of every column
    if (users == "all") {
      var lastTh = document.querySelector('tr th:last-child');
      lastTh.style.display = "none";
      var allLastTds = document.querySelectorAll('td:last-child');
      for (var i = 0; i< allLastTds.length; i++) {
        allLastTds[i].style.display="none";
      }
    }
    // if users is "approved"
    // make the checkbox disabled
    if (users == "approved") {
      thInputTag = document.getElementById("select_all");
      thInputTag.setAttribute("disabled", true);
    }
  }
})(users);
</script>

另外，你可以重写这部分（不需要 PHP）：

<input type='radio'  name='users' value='unapproved' /> Unapproved Candidates<br> 
<input type='radio'  name='users' value='approved' /> Approved Candidates<br>
<input type='radio' id='show' name='users' value='all'  /> All Candidates<br><br> 
<input type="submit" value="submit" id="submit"><br><br>

【讨论】：

感谢您提供代码，但不幸的是，它没有在表格中显示任何用于“检查所有”的切换。实际上，它根本没有在任何单选 + 提交按钮点击中显示“全部检查”
我按照指示更改了用户值，但小提琴仍然没有显示结果
您在更改代码后是否使用了“运行”按钮？将用户更改为“已批准”，然后按左上角的“运行”按钮。查看更改。
是的，我做到了。但是现在它显示了“检查所有”列，并且不会出现在不同的用户选择上。它对你有用吗？？
因此您希望根据单选选项对表格进行连续更新。好的，检查这个更新的小提琴：updated Fiddle

【解决方案2】：

我发现这个示例基本上根据复选框状态隐藏/取消隐藏表格行

.expandable {
    display: none;
}

#isexpanded:checked ~ * tr.expandable {
    display: table-row;
    background: #cccccc;
}

#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
}

<body>

<input type="checkbox" id="isexpanded" />Hide/Unhide
<h1>Expandable elements</h1>
<table>
    <thead>
        <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
    </thead>
    <tbody>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    </tbody>
</table>


</body>

【讨论】：

感谢伙伴的努力。等待你的更新。
我希望使用 jquery，因为使用 span 和 css 可能会完全干扰设计。 @user3423927