'checkbox'에 해당되는 글 2건
Checking / UnChecking all checkboxes of the page dynamically in a single click
화면 상의 모든 체크 박스를 단일 클릭으로 모두 Checking, UnChecking 하는 JavaScript
Introduction
Generally we came acroos in this situation when we need to facilitate the user to select or delsect all records of the page at a single click instead of selecting records one by one. You can refer to below picture for example.
Scenario
This generally happens when you are presenting some records into GridView or DataGrid and you are providing a column called Select, instead of checking all records one by one you want to provide links called "Select All" or "DeSelect All" to check and uncheck all checkboxes of the GridView respectively.
Solution
HTML Code
To do that you need to provide a two links as displayed in the picture above. Following is the code for "Select All" and "DeSelect All" link.
<a href="javascript:void(0)" onclick="SelectAllCheckBoxes(true)">Select All</a> | <a href="javascript:void(0)" onclick="SelectAllCheckBoxes(false)">DeSelect All</a>
If Select All link will be clicked then SelectAllCheckBoxes javascript function will fire with parameter as true and when DeSelect All link will be clicked the same function will fire with paramter as false.
JavaScript Code
The code for JavaScript function SelectAllCheckBoxes are as follows
<script language="javascript" type="text/javascript">
function SelectAllCheckBoxes(action)
{
var myform=document.forms['aspnetForm'];
var len = myform.elements.length;
for( var i=0 ; i < len ; i++)
{
if (myform.elements[i].type == 'checkbox')
myform.elements[i].checked = action;
}
}
</script>
In the above function first I am getting the html form element in the myform variables then I am getting the length of all elements on the page. Next I am looping through all the elements and checking for the element whose element type is checkbox as I am only interested about the checkbox element of the page. Once I got the checkbox element I am assiging the checked property to the parameter passed to this function (either true or false) and I am done.
Thats it!!!
Conclusion
Doing this was simpler than I had expected, hope this helps some one. Thanks and Happy Coding !!!
How to get value from TextBox, RadioButtonList, DropDownList, CheckBox through JavaScript
getValue_ServerControls_Javascript.aspxThis picture is the UI screenshots of the the code I am going to present in this article
Getting TextBox Value in JavaScript
.aspx page code
Following code will render a TextBox and a Button control as displayed in the picture above.
<table> <tr> <th colspan="2" align="left"> Getting TextBox Value in JavaScript: </th> </tr> <tr> <td> <asp:TextBox ID="txt1" runat="server"></asp:TextBox> </td> <td> <input type="button" value="Submit" onclick="GetTextBoxValue('<%= txt1.ClientID %>')" /> </td> </tr> </table>
JavaScript function
Following code is JavaScript function to get value from TextBox control.
// Get TextBox value
function GetTextBoxValue(id)
{
alert(document.getElementById(id).value);
}Getting DropDownList/ListBox selected value
Following code will render a DropDown (Html select control) and a button as displayed in the picture above.
.aspx code
<table>
<tr>
<th colspan="2" align="left">
Getting DropDown/ListView Value
</th>
</tr>
<tr>
<td>
<asp:DropDownList ID="dropDown" runat="Server">
<asp:ListItem Text="Item 1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Item 3" Value="3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<input type="button" value="Submit" onclick="GetDropDownValue('<%= dropDown.ClientID %>')" />
</td>
</tr>
</table>Following is the JavaScript function to get the value from DropDown control
// Get DropDown value
function GetDropDownValue(id)
{
alert(document.getElementById(id).value);
}Getting RadioButtonList selected value
Following code will render RadioButtons and a button as displayed in the picture above.
.aspx code
<table>
<tr>
<th colspan="2" align="left">
Getting RadioButton Value
</th>
</tr>
<tr>
<td>
<asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" RepeatDirection="horizontal">
<asp:ListItem Text="Radio 1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Radio 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Radio 3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<input type="button" value="Submit" onclick="GetRadioButtonValue('<%= radiobuttonlist1.ClientID %>')" />
</td>
</tr>
</table>JavaScript Code
Following is the JavaScript function to get the selected value from RadioButtons
// Get radio button list value
function GetRadioButtonValue(id)
{
var radio = document.getElementsByName(id);
for (var ii = 0; ii < radio.length; ii++)
{
if (radio[ii].checked)
alert(radio[ii].value);
}
}Getting CheckBox checked status
Following code will render a checkbox and a button as displayed in the picture above.
.aspx code
<table>
<tr>
<th colspan="2" align="left">
Getting Checkbox Value
</th>
</tr>
<tr>
<td>
<asp:CheckBox runat="server" ID="checkBox1" Text="Check Box" />
</td>
<td>
<input type="button" value="Submit" onclick="GetCheckBoxValue('<%= checkBox1.ClientID %>')" />
</td>
</tr>
</table>JavaScript Code
Following is the JavaScript function to get value from a Checkbox.
// Get Checkbox checked status
function GetCheckBoxValue(id)
{
alert(document.getElementById(id).checked);
}
Show/Hide Text using
Following code will render three buttons and a table element having some text as displayed in the picture above.
.aspx code
<b>Show/Hide display text</b><br />
<input type="button" value="Toggle Display Following Text" onclick="ToggleFollowingText('table1')" />
<input type="button" value="Show Only" onclick="ShowOrHide('show', 'table1')" />
<input type="button" value="Hide Only" onclick="ShowOrHide('hide', 'table1')" />
<table id="table1">
<tr>
<td style="background-color:Aqua">
This is my hidden text, You can play with it by clicking above button.
</td>
</tr>
</table>JavaScript Code
Following is the JavaScript function to toggle display the table and show and hide element the table.
// Show/Hide element
function ToggleFollowingText(id)
{
document.getElementById(id).style.display == '' ? document.getElementById(id).style.display = 'none' : document.getElementById(id).style.display = '';
}
// Either show or hide element
function ShowOrHide(condition, id)
{
if (condition == 'show')
document.getElementById(id).style.display = '';
else if (condition == 'hide')
document.getElementById(id).style.display = 'none';
}
Prev
Rss Feed