radio、checkbox、selectなどの選択ラベルのまとめ

4755 ワード

JavaScript html フレーム Gmail

以下は実例として説明する.

htmlページ

<body>

<form name="form1" action="test" method="post">
<label>radio:</label>
<input name="myRadio" type="radio" value="126" checked="true" onclick="getRadioValue();"/>126  
<input name="myRadio" type="radio" value="163" onclick="getRadioValue();"/>163  
<input name="myRadio" type="radio" value="189" onclick="getRadioValue();"/>189  
<input name="myRadio" type="radio" value="gmail" onclick="getRadioValue();"/>gmail  

<input name="setValue" type="button" value="  163  " onclick="setRadioValue('163');"/>

<br/>
<br/>
<label>checkBox:</label>

<input name="myCheckBox" type="checkbox" value="126" />126  
<input name="myCheckBox" type="checkbox" value="163" />163  
<input name="myCheckBox" type="checkbox" value="189" />189  
<input name="myCheckBox" type="checkbox" value="gmail" />gmail  
  :<input type="checkbox" id="checkAll"onclick="checkall()" />  


<br/>
<br/>
<label>select:</label>
<select name="mySelect" id="mySelect" onchange="jumpMenu('parent',this,0)">
  <option value="http://www.126.com">126  </option>
  <option value="http://mail.163.com">163  </option>
  <option value="http://mail.189.cn">189  </option>
  <option value="http://www.gmail.com">gmail  </option>
</select>
</form>

</body>

javascriptコード:

<script type="text/javascript">
<!--

/*   showText()  
1.  radio       TextNode,   HTML   Element.      parentNode childNodes      HTML   ELEMENT TextNode   . 
2.  childNodes             radio      TextNode      . 
3.    radio   TextNode        radio       Node,       nodeType   3, TextNode.   nodeValue  . 

             ：
        radio     ，        radio value  ，   value        ：
<input name="myRadio" type="radio" value="126@126  " checked="true"/>126  
   value  2  ，    value ，     text    
*/

//  radio  
function getRadioValue(){
	var obj = document.getElementsByName("myRadio");
	for(i=0;i<obj.length;i++)
		if(obj[i].checked==true){		    
			alert("radio.value="+obj[i].value);
			showText(obj[i]);
		}			
}

// radio  
function setRadioValue(myvalue){
	var obj = document.getElementsByName("myRadio");
	for(i=0;i<obj.length;i++)
		if(obj[i].value==myvalue){		    
			obj[i].checked=true;
		}	
}


/*checkBox       radio    ，             ；*/
//           
function checkall() {    
    var isChecked=(document.form1.checkAll.checked == true);    
    var elements_all=document.getElementsByName("myCheckBox");    
    for(i=0;i<elements_all.length;i++) {    
        var element=elements_all[i];       
        element.checked=isChecked;
		if(isChecked==true) 
			showText(element);   
    }    
}    

//select  
/*  ：select      struts2       ，     ；   html   select        。          :
1、  options：var elements = document.form1.mySelect.options;
2、   i option      ：var optionText = elements[i].innerText;
3、eval()           ，        JavaScript   。               ，   string          ，               。       eval()      String        。
4、        select    */

function jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function showText(obj) { 
	var parentObj = obj.parentNode;   //      
	for(var i=0;i <parentObj.childNodes.length;i++){   //              
		if(parentObj.childNodes[i]   ==   obj   &&   parentObj.childNodes[i+1]!=null){   //             radio 
			alert(parentObj.childNodes[i+1].nodeValue);   //   
		} 
	} 
} 


//-->
</script>

javascript時間関数大全書