Méthode JavaScript pour implémenter le clic sur un bouton radio pour modifier le contenu du champ de texte dans la zone de saisie

Méthode JavaScript pour implémenter le clic sur un bouton radio pour modifier le contenu du champ de texte dans la zone de saisie_javascript skills

WBOY

Libérer： 2016-05-16 15:45:41

original

1968 Les gens l'ont consulté

L'exemple de cet article décrit comment utiliser JavaScript pour modifier le contenu du champ de texte dans la zone de saisie en cliquant sur un bouton radio. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

La méthode ici consiste à cliquer sur le bouton radio pour modifier le contenu du champ de texte dans la zone de saisie. Il s'agit d'une application simple de JavaScript, qui peut réduire la saisie de l'utilisateur et améliorer la facilité d'utilisation. même fonction qu'un onglet TAB, et vous pouvez soumettre le formulaire une fois terminé, ce qui vaut la peine d'être appris.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<html>
<head>
<title>JavaScript点击单选框改变输入框内容</title>
</head>
<body>
<script language=JavaScript>
var defaultValue = ""
function Changes() {
var defaultValue = "changed";
}
ie = document.all&#63;1:0
ns4 = document.layers&#63;1:0
var c = 1
function hideIt(id) {
if (ie) {
document.all[id].style.zIndex = c--; 
document.all[id].style.visibility = "hidden";
document.all['hider'].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c--;
document.layers[cat].layers[id].visibility = "hide";
document.layers[cat].layers['hider'].visibility = "show";
} 
}
function showIt(id) {
if (ie) {
document.all[id].style.zIndex = c++; 
document.all[id].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c++;
document.layers[cat].layers[id].visibility = "show";
}
else {
document.getElementById(id).style.zIndex = c++; 
document.getElementById(id).style.visibility = "visible"; 
} 
}
function imgLbl(tab) {
premier = frmWc.elements[tab - 1];
if (premier.checked == 1) {
premier.checked = 0;
} else {
premier.checked = 1;
}
}
</script>
<FORM name=protectForm action="" method=post >
  <TABLE width=560>
  <TR>
 <TD>
  <TABLE cellPadding=2>
  <TR align=left>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'off');return true" type=radio value=0 
  name=Level checked>
  ASP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'low');return true" type=radio 
  value=25 name=Level>
  PHP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'high');return true" type=radio value=75 name=Level>
  JSP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'excl');return true" type=radio 
  value=100 name=Level>
  AJAX</TD>
  </TR></TABLE></TD></TR></TABLE>
  <table cellspacing=1 cellpadding=0 width=562 border="0" bgcolor="7285CF" height="240">
  <tr> 
  <td colspan=3 height="145" valign="top" bgcolor="F2F2F2"> 
  <div id=off style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560" border="0">
  <tr> 
  <td width="560">ASP是一种微软发明的WEB动态编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=low 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 2; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr >
  <td width="1237">PHP是一种开源、免费平台通用型WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=high 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr>JSP是SUN公司制造的基于JAVA的WEB编程容器，也是一种WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=excl 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr> 
  <td width="953">AJAX是一种WEB交互型框架语言，可以很好的提升用户体验。</td>
  </tr>
 </table>
 </div> 
 </td>
 </tr>
 </table>
 <TABLE cellSpacing=0 cellPadding=0 width=560>
  <TR>
  <TD align=right height="30"> 
  <INPUT class=bottom type=submit value=" 确定 "> 
  <INPUT class=bottom type=button value=" 取消 " name="Button"> 
 </TD></TR></TABLE>
 </FORM>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.