Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio

Một ứng dụng cho phép bạn hiển thị một field nào đó khi nhấp chọn vào một buttom radio đã được định sẵn. Dùng nhiều trong thiết kế contact form.


Dưới đây là minh họa về khung xác nhận mail

Hình minh họa:

Nhấp vào nút Yes thì field điền mail sẽ hiển thị, như hình bên dưới:


Code HTML:

<!-- Radio elements -->
<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" checked="checked" /><label for="newsletter-2">No</label>

<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>

Code Javascript:

<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>

Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio