Previously I have written about how to attach an onclick client event to a radio button list on databound and adding some flare to show what the user has selected.
- Add a javascript onclick event to a radio button list on databound
- Adding a Javascript onclick event to a Radio Button List Item on DataBound Pt 2
In this post I am going to use jQuery to attach the onclick events to a radio button list and to a group of checkboxes.
Looking at the picture above. When the user selects one of the radio list items the message at the top is created outlining the items value and the text in associated label control. In this case “Glasgow Item” is in the label and “Glasgow” is the value of the control. With the checkboxes, everytime a user checks an item an unordered list item is created with the text within the associated label and the value of the item. As shown above 3 items have been selected that are shown in the listing.
The messages/list could be styled and used in many occasions giving any web form more “tra la”. In my next post I’ll put together a mock page that is styled up. A live demo of above picture can be seen here. Onto the code:
HTML:
1: <div id="Message"></div> 2: <ul id="listM"></ul> 3: <input id="grpLocation_0" type="radio" name="grpLocation" value="Edinburgh" /> 4: <label for="grpLocation_0">Edinburgh Item</label> 5: <input id="grpLocation_1" type="radio" name="grpLocation" value="Glasgow" /> 6: <label for="grpLocation_1">Glasgow Item</label> 7: <input id="grpLocation_2" type="radio" name="grpLocation" value="Aberdeen" /> 8: <label for="grpLocation_2">Aberdeen Item</label> 9: <input id="grpLocation_3" type="radio" name="grpLocation" value="Scotland" /> 10: <label for="grpLocation_3">Scotland Item</label> 11: <hr /> 12: <input id="Radio1" type="checkbox" name="Location2" value="Edinburgh" /> 13: <label for="Radio1">Edinburgh Item</label> 14: <input id="Radio2" type="checkbox" name="Location2" value="Glasgow" /> 15: <label for="Radio2">Glasgow Item</label> 16: <input id="Radio3" type="checkbox" name="Location2" value="Aberdeen" /> 17: <label for="Radio3">Aberdeen Item</label> 18: <input id="Radio4" type="checkbox" name="Location2" value="Scotland" /> 19: <label for="Radio4">Scotland Item</label>
Script:
1: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 2: <script type="text/javascript"> 3: $(document).ready(function() { 4: $("input[name*='grpLocation']").click(function() { 5: var defaultValue = $("label[for*='" + this.id + "']").html(); 6: var defaultm = "You have chosen : "; 7: $('#Message').html('').html(defaultm + defaultValue + ' | Value is : ' + $(this).val()); 8: }); 9: 10: $("input[name*='Location2']").click(function() { 11: GetCheckedValues(); 12: }); 13: 14: }); 15: 16: function GetCheckedValues() { 17: $('#listM').html(''); 18: $("input[name*='Location2']").each(function() { 19: if (this.checked == true) { 20: var defaultValue = $("label[for*='" + this.id + "']").html(); 21: $('#listM').append('<li>'+ defaultValue + ' | Value is : ' + $(this).val() + '</li>'); 22: } 23: }); 24: 25: } 26: </script>
Breaking down the script.
When the page is loaded jQuery adds the onclick events to the group of radio buttons. When a radio item is selected the script finds the associated label (line 5) and grabs the text. Next couple of lines sets up the message div by displaying the text from the label and the items value $(this.).val().
The checkbox functionality differs as more than one item can be selected. When the page is loaded jQuery finds the checkboxes(line 10) and attaches “GetCheckedValues()” function to the onclick event. When the user checks/unchecks an item this function is called. The function goes through each appropriate checkbox object (line 18) and if the checkbox is checked the label text and the value is added to the unordered list (listM).
I would thoroughly recommend the following book if your looking to learn jQuery : jQuery in Action by Bear Bibeault and Yehuda Katz.
by Bear Bibeault and Yehuda Katz.UPDATE: New Post – jQuery – Revisit – Fun with Radio Button lists, checkboxes and labels
1 Comment
Edward
very helpful. I tried to attach the onclick events to a radio button list and to a group of checkboxes a couple of times, but failed. I almost gave up the idea, but then found this site.