Question

I have a form with 4 columns.
Column 1 is a list of questions and columns 2-4 are yes/no radio buttons.
When the form first displays only column 1 should show.  User would select a radio button to additionally display either columns 2&3 or column 4

我找到了隐藏列组的代码，但列中的单选按钮仍然显示。我试图折叠列和它们内部的所有内容。我正在自学CSS，我对javascript一无所知，所以它可能只是用户错误。

<!DOCTYPE html>

<!--       cg2.Style.visibility="hidden"
       cg3.Style.visibility="hidden"
       cg4.Style.visibility="hidden"-->

</script>
</head>

    <body onload="vbscript:Startup window.dialogarguments">
    <form name="baseform" id="baseform" action="" method="post">

    <div id="showhide">
          <label><input type="radio" name="T_097_WD"  id="T_097lft" value="L1M"  />this button Shows columns 2 & 3
          </label> &emsp;&emsp;
          <label><input type="radio" name="T_097_WD"  id="T_097slv" value="SLV"  />this button Shows  column 4
          </label>
    </div>

<table border="1"  style="width:50%" >
 <COLGROUP id=cg1></COLGROUP>
 <COLGROUP id=cg2></COLGROUP>
 <COLGROUP id=cg3></COLGROUP>
 <COLGROUP id=cg4></COLGROUP>
    <tr>
        <td>Never hide this column</td>
        <td>column collapsed on startup</td>
        <td>column collapsed on startup</td>
        <td>column collapsed on startup</td>
    </tr>
    <tr>
        <td>Q2</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>
    <tr>
        <td>Q3</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>
    <tr>
        <td>Q4</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>
    <tr>
        <td>Q5</td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
        <td><input type="radio" name="T_100_hi" id="T_100" value="1"  />Yes
            <input type="radio" name="T_100_hi" id="T_100" value="0"  /></td>
    </tr>

</table>

Answer 1

如果我理解正确，以下解决方案应该适合您。

＆＃13;

var selection = document.getElementById("selection");
selection.addEventListener("change", function(e) {
  if (e.target.tagName === "INPUT" && e.target.type === "radio") {
    //get radio value
    var value = document.querySelector('input[type="radio"]:checked').value;
    
    //get items by column
    var one = document.querySelectorAll("td:nth-child(1)");
    var twothree = document.querySelectorAll("td:nth-child(2),td:nth-child(3)");
    var four = document.querySelectorAll("td:nth-child(4)");
    
    //hide all columns
    hideOrShow(one, false);
    hideOrShow(twothree, false);
    hideOrShow(four, false);
    
    //show selected columns
    switch (value) {
      case "one":
        hideOrShow(one, true);
        break;
      case "twothree":
        hideOrShow(twothree, true);
        break;
      case "four":
        hideOrShow(four, true);
        break;
    }
  }
});

function hideOrShow(nodes, show) {
  [].forEach.call(nodes, function(item) {
    item.style.display = show ? "inline-block" : "none";
  });
}

//force change event to set to initial state
var changeEvent = new Event("change", {bubbles: true});
document.querySelector('input[type="radio"][value="one"]').dispatchEvent(changeEvent);

＆＃13;

<div id="selection">
  <label>
    First
    <input type="radio" name="shown" value="one" checked />
  </label>
  <label>
    Two and Three
    <input type="radio" name="shown" value="twothree" />
  </label>
  <label>
    Four
    <input type="radio" name="shown" value="four" />
  </label>
</div>
<table border="1">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>  
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>  
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>  
  </tr>
</table>

＆＃13;

Answer 2

我假设您无法引用表中的列，而不需要有关响应单选按钮事件的信息。假设是这种情况，请继续阅读。

为每个表元素添加一个类，以便您可以识别哪些元素属于哪些行。然后基于单选按钮事件，运行一个函数来隐藏具有相应类名的所有元素。

例如

<tr>
  <td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr>
  <td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>

现在你可以使用jQuery做类似的事情：

$('.col2').hide();

具有 col2 类的每个单元格都将被隐藏，这意味着第二列中的每个单元格。

如果您还不知道，您应该能够找到相应的代码来响应网络上的单选按钮更改事件。

用于显示/隐藏html表列的单选按钮

2 个答案: