使用javascript切换表格的正文

Question

<div>
  <input type="radio" name="check" value="cash" checked/>cash
  <input type="radio" name="check" value="credit" />credit
</div>

<table>
  <tbody id="cash">
    <tr>
      <td>
        Cash User name:
      </td>

      <td>
        <input type="text" name="cash1" />
      </td>

    </tr>
  </tbody>

  <tbody id="credit">
    <tr>
      <td>
        credit User name:
      </td>
      <td>
        <input type="text" name="credit1" />
      </td>
    </tr>
  </tbody>
</table>

在div标签中，我有两个单选按钮。默认情况下，我已经选中了名为cash的单选按钮now。我想要的是，当选中单选按钮现金时，显示id为cash的tbody，隐藏id为credit的tbody，选中名称为credit的单选按钮时，显示id为credit的tbody，隐藏其他tbody。我已经用jQuery做过了，但我想用Javascript来做。

Answer 1

如果您愿意使用纯CSS解决方案，那么就必须去掉radio按钮周围的div。

tbody {
    display: none;
}

input[value="cash"]:checked + input[value="credit"] + table tbody[id="cash"] {
    display: table-row-group;
}

input[value="credit"]:checked + table tbody[id="credit"] {
    display: table-row-group;
}

注意:只需确保您声明了一些class并使这些选择器特定，否则它将以文档中上述组合中的所有元素为目标。

Answer 2

下面是要在HTML之后编写的Javascript代码：

var radios = document.getElementsByName("check");
for( var i = 0; i < radios.length; i++){
    switch( radios[i].value){
        case "cash":
            radios[i].onclick = function(){
                document.getElementById("credit").style.display = 'none';
                document.getElementById("cash").style.display = 'block';
            };
            break;

        case "credit":
            radios[i].onclick = function(){
                document.getElementById("cash").style.display = 'none';
                document.getElementById("credit").style.display = 'block';
            };
            break;
    }

    if( radios[i].checked){
        radios[i].click();
    }
}

代码在http://jsfiddle.net/2sPGn/上运行

Answer 3

Javascript代码

<script>
function showData(obj) {
    if ( obj.value == "cash") {
        document.getElementById("cash").style.display = '';
        document.getElementById("credit").style.display='none';
    } else {
        document.getElementById("cash").style.display = 'none';
        document.getElementById("credit").style.display='';
    }
}
</script>

HTML

<div>
    <input type="radio" name="check" value="cash" onclick='showData(this);' checked/>cash
    <input type="radio" name="check" value="credit" onclick='showData(this);' />credit
</div>
<table>
    <tbody id="cash">
        <tr>
            <td>Cash User name:</td>
            <td>
                <input type="text" name="cash1" />
            </td>
        </tr>
    </tbody>
    <tbody id="credit" style='display:none'>
        <tr>
            <td>credit User name:</td>
            <td>
                <input type="text" name="credit1" />
            </td>
        </tr>
    </tbody>
</table>