RadioButtonList

出自ProgWiki

RadioButtonList

• System.Web.UI.WebControls.RadioButtonList

FAQ

在用戶端的JavaScript設定RadioButtonList點選項目

• 例如ASP.NET頁面裡的RadioButtonList為

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
	<asp:ListItem Selected="True" Value="">所有</asp:ListItem>
	<asp:ListItem Value="1">啟用</asp:ListItem>
	<asp:ListItem Value="0">關閉</asp:ListItem>
</asp:RadioButtonList>

• 例如

以JavaScript去點選"所有"那一項〈ID為RadioButtonList1_0，後頭的0代表選項中第1個項目〉

• 使用ASP.NET AJAX所提供的 $get()

$get('RadioButtonList1_0').checked="checked";

• 或使用jQuery所提供的 $()

$('#RadioButtonList1_0').attr('checked','checked');

以CSS美化控制項

• 參照：Custom radio and checkbox inputs using CSS

（圖檔 gr_custom-inputs.png 的來源）

span > input
{
	padding: 0;
	width: 16px;
	float: left;
	position: absolute;
	left: 0;
	opacity: 0;
}
span > label 
{ 
	float: left; 
	color: #000000; /*color: #fff; */
	padding: 0 18px 0 18px;
	-moz-transition: color 1s ease; 
	-o-transition: color 1s ease; 
	-webkit-transition: color 1s ease; 
	transition: color 1s ease;
}
 
span:not(#foo) > input:hover + label, 
span:not(#foo) > input:focus + label,
span:not(#foo) > input + label:hover, 
span:not(#foo) > input:focus + label			
{
     color: #0000FF;
}
 
span:not(#foo) > input + label
{
	background: url(gr_custom-inputs.png) 0 -1px no-repeat;
	height: 16px;
	margin: 6px 0 6px 0;	
}
span:not(#foo) > input[type=radio] + label										{ background-position: 0 -161px; }
 
/* Checked styles */
span:not(#foo) > input[type=radio]:checked + label 							    { background-position: 0 -241px; }
span:not(#foo) > input[type=checkbox]:checked + label 							{ background-position: 0 -81px; }
span:not(#foo) > input[type=checkbox]:hover:checked + label,
span:not(#foo) > input[type=checkbox]:focus:checked + label,
span:not(#foo) > input[type=checkbox]:checked + label:hover,
span:not(#foo) > input[type=checkbox]:focus:checked + label 					{ background-position: 0 -101px; }
span:not(#foo) > input[type=radio]:hover:checked + label,
span:not(#foo) > input[type=radio]:focus:checked + label,
span:not(#foo) > input[type=radio]:checked + label:hover,
span:not(#foo) > input[type=radio]:focus:checked + label 						{ background-position: 0 -261px; }
 
/* Hover & Focus styles */
span:not(#foo) > input[type=checkbox]:hover + label,
span:not(#foo) > input[type=checkbox]:focus + label,
span:not(#foo) > input[type=checkbox] + label:hover 							{ background-position: 0 -21px; }
span:not(#foo) > input[type=radio]:hover + label,
span:not(#foo) > input[type=radio]:focus + label,
span:not(#foo) > input[type=radio] + label:hover								{ background-position: 0 -181px; }
 
/* Active styles */
span:not(#foo) > input[type=checkbox]:active + label,
span:not(#foo) > input[type=checkbox] + label:hover:active						{ background-position: 0 -41px; }
span:not(#foo) > input[type=radio]:active + label,
span:not(#foo) > input[type=radio] + label:hover:active						    { background-position: 0 -201px; }
span:not(#foo) > input[type=checkbox]:active:checked + label,
span:not(#foo) > input[type=checkbox]:checked + label:hover:active				{ background-position: 0 -121px; }
span:not(#foo) > input[type=radio]:active:checked + label,
span:not(#foo) > input[type=radio]:checked + label:hover:active				    { background-position: 0 -281px; }
 
/* Disabled styles */
span:not(#foo) > input[type=checkbox]:disabled + label,
span:not(#foo) > input[type=checkbox]:hover:disabled + label,
span:not(#foo) > input[type=checkbox]:focus:disabled + label,
span:not(#foo) > input[type=checkbox]:disabled + label:hover,
span:not(#foo) > input[type=checkbox]:disabled + label:hover:active			    { background-position: 0 -61px; }
span:not(#foo) > input[type=radio]:disabled + label,
span:not(#foo) > input[type=radio]:hover:disabled + label,
span:not(#foo) > input[type=radio]:focus:disabled + label,
span:not(#foo) > input[type=radio]:disabled + label:hover,
span:not(#foo) > input[type=radio]:disabled + label:hover:active				{ background-position: 0 -221px; }
span:not(#foo) > input[type=checkbox]:disabled:checked + label,
span:not(#foo) > input[type=checkbox]:hover:disabled:checked + label,
span:not(#foo) > input[type=checkbox]:focus:disabled:checked + label,
span:not(#foo) > input[type=checkbox]:disabled:checked + label:hover,
span:not(#foo) > input[type=checkbox]:disabled:checked + label:hover:active	    { background-position: 0 -141px; }
span:not(#foo) > input[type=radio]:disabled:checked + label,
span:not(#foo) > input[type=radio]:hover:disabled:checked + label,
span:not(#foo) > input[type=radio]:focus:disabled:checked + label,
span:not(#foo) > input[type=radio]:disabled:checked + label:hover,
span:not(#foo) > input[type=radio]:disabled:checked + label:hover:active		{ background-position: 0 -301px; }