CODEWITHSUNDEEP
javascripthtmlradio-buttontoggle
user2999062
user2999062

Reputation: 37

toggle tbody of table with javascript

<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>

In the div tag I am having two radio buttons. By default I have made the radio button named cash checked now. What I want is that when radio button cash is checked tbody with id cash is shown and tbody with id credit hidden and when radio button with name credit is checked then tbody with id credit is shown and other tbody to be hidden. I have done it with jQuery but I want it to do with Javascript.

Upvotes: 1

Views: 1462

Answers (4)

Mohamed Rashid.P
Mohamed Rashid.P

Reputation: 183

I think this will help you :

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

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

Upvotes: 0

Kamlesh
Kamlesh

Reputation: 529

Javascript Code

<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>

Upvotes: 0

Costel
Costel

Reputation: 131

Here is the Javascript code, to be written after the 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();
    }
}

The code is running at http://jsfiddle.net/2sPGn/

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157324

If you are willing to go for a pure CSS solution, than you have to get rid of the div around your radio buttons

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;
}

Note: Just make sure you declare some class and make these selectors specific, else it will target all the elements in the above combination in the document.

Upvotes: 2

Related Questions