[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 388
  • Last Modified:

How do you check if a radio button has the attribute 'checked' with Prototype

Hello,

I have a bit of code that checks a list if LI tags which contain radio button input's.  I have some clever logic via the Chocolate Chip Javascript framework library to work out when an LI is clicked, it will apply a relevant class to display the radio button has been selected.

However, I want to expand that logic so that it digs deeper into the LI and finds which radio button input is the one that is already selected (prior to any user choosing anything) when the page loads and apply a class to it so that it instantly highlights what is already selected.

I'm a bit new to Prototype so I'm not sure what is the best approach to do this so would appreciate any help you can offer.

So in the case below, I want to pick out button 3.

JSFiddle Link: http://jsfiddle.net/Qw6KA/

HTML:
<ul class="radioList">
   <li>
      <input type="radio" id="radio1" name="radioButton" value="Button 1">
      <label for="radio1">Button 1</label>
   </li>
   <li>
      <input type="radio" id="radio2" name="radioButton" value="Button 2">
      <label for="radio2">Button 2</label>
   </li>
   <li>
      <input type="radio" id="radio3" name="radioButton" value="Button 3" checked="checked">
      <label for="radio3">Button 3</label>
   </li>
   <li>
      <input type="radio" id="radio4" name="radioButton" value="Button 4">
      <label for="radio4">Button 4</label>
   </li>
</ul>

Open in new window



JS (Prototype):
$.RadioButtons = function( viewSelector, callback ) {
		var items = viewSelector + ".radioList li";
		var radioButtons = $$(items);
		radioButtons.forEach(function(item) {
			item.bind("click", function() {
				radioButtons.forEach(function(check) {
					check.removeClass("selected");
				});
				this.addClass("selected");
				this.last().checked = true; 
				if (callback) {
					callback(item);
				}
			});
		});
	};

Open in new window


Thanks
-JaXL
0
JaXL
Asked:
JaXL
  • 4
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Check this example : http://jsfiddle.net/KMcbG/
$.RadioButtons = function( viewSelector, callback ) {
    var items = viewSelector + ".radioList li";
    var radioButtons = $$(items);
    radioButtons.forEach(function(item) {
        Event.observe(item, 'click', function() {
            radioButtons.forEach(function(check) {
                check.removeClassName("selected");
            });
            this.addClassName("selected");
            this.firstDescendant().checked = true; // but why?
            if (callback) {
                callback(item);
            }
        });
    });
};

$.RadioButtons("ul",ok);

function ok(a,b,c,d,e) {
    alert("ok");
}

Open in new window

0
 
leakim971PluritechnicianCommented:
0
 
JaXLAuthor Commented:
Thanks leakim971.

Is it possible to isolate the selected radio button without clicking, say on page load?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
leakim971PluritechnicianCommented:
<< isolate >>?
0
 
JaXLAuthor Commented:
Sorry - my last comment probably made no sense at all.

When the page loads, I want to highlight the radio button that is already checked straight away.  Although I do wish to keep the click function so when a user chooses another radio button it will remove the highlight and highlight the new choice.

Hopefully that makes more sense
0
 
leakim971PluritechnicianCommented:
var el = $$("ul.radioList input:checked")[0];
el.parentNode.addClassName("selected");

test page : http://jsfiddle.net/KMcbG/2/
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now