切換與javascript表格的tbody

<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的Tbody，並且隱藏了身份證號爲credit的Tbody，並且當選中名稱信用單選按鈕時，顯示身份證號爲credit的Tbody，並顯示其他Tbody。我已經完成了與jQuery，但我希望它與Javascript做。切換與javascript表格的tbody

來源

2013-12-18 user2999062

* 「我」想這樣做* - 或者你想* 「我們」 *辦呢？到目前爲止你有什麼最好的嘗試嗎？ –

wel我已經做了jquery，但我想在javascript中...我是新來的JavaScript所以dnt knw很abt它 – user2999062

檢查此網址http://jsfiddle.net/hZBfb/ – Kamlesh

如果你願意去一個純CSS的解決方案，比你要擺脫div的周圍的radio按鈕

Demo

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並使這些選擇器具體，否則它將目標文件中上述組合中的所有元素。

來源

2013-12-18 05:38:59

這不工作 – user2999062

@ user2999062你看過演示了嗎？或者你甚至在第一時間看過我的答案？ –

我不明白在哪裏給類....我是新的javascrpt ...所以有點困惑它 – user2999062

這裏是JavaScript代碼，可以在HTML後寫：

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/運行

來源

2013-12-18 06:49:17 Costel

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>

來源

2013-12-18 06:58:11 Kamlesh

我認爲這將有助於你：

$(document).ready(function(){ 
    $('#cash,#credit').hide(); 

    $('input[type=radio]').change(function(){ 
      $('#'+$(this).attr('value')).show(); 
    }); 
});

來源

2013-12-18 07:40:01

切換與javascript表格的tbody

回答

相關問題