开发者

How to hide radio buttons in JavaScript on button click [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

j开发者_StackOverflow社区avascript hide/show element

How TO hide the radio buttons, the radio buttons should be shown only when the user clicks on the show button plz can you give the sample program or suggest the site for this and in advance thank you


html:

<div id="radioButtonContainer">
    <input type="radio" name="selector" value="option1" id="selector1" /><label for="selector1">Option 1</label><br />
    <input type="radio" name="selector" value="option2" id="selector2" /><label for="selector2">Option 2</label><br />
    <input type="radio" name="selector" value="option3" id="selector3" /><label for="selector3">Option 3</label><br />
</div>

Javascript:

var radioButtonContainer = document.getElementById('radioButtonContainer');
radioButtonContainer.style.display = 'none';

document.getElementById('theButton').onclick = function() {
    radioButtonContainer.style.display = 'block';
};

Explanation: I wrap the buttons inside a container for ease of use. I then select the container in javascript, and store it in a variable for efficiency and shorter code. I set the display to none (hide it), and then attach an event handler to the click event of a the element with id "theButton" (not in html) to show it again.

Note: I hide them with Javascript, because otherwise the form could be unusable for people who don't use javascript (they do exist!), or when there would be a javascript error.


Put the radio buttons in a div with style display:none and on submit buttons Onclick event using javascript call a function and in that funcation set display as block for the div.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜