Using onclick to mark radiobutton

Hello.

Im fairly new at jQuery, so bear with me.

The following is auto-generated html (which i cannot edit).

<span
class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=10>Meget enig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=11>Enig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=12Hverken eller<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=13>Uenig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=14Meget uenig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=15>Ved ikke</span>


I would like to make the text (the entire span) clickable, but without using the <label for"">-function. My thought initially was to add the attribute 'checked' with an onclick function, but then i can't remove it again. So if you mark option 1, then option 2, you cannot mark option one again as i already has the attribute checked; something like this:


$
(window).load(function(){
$("input[type=radio]").each(function() {
$(this).parent('span').click(function(){
$(this).children('input').attr('checked','checked');
$('span:has(input:radio:checked)').attr('checked', 'checked');
});
});


Any help would be greatly appreciated!

 

Uhm... A radio-button set can only have one option checked, and there's no reason doing this with js - the form itself will take care of this.
For using the whole span as a click able selector, you can do something like:

  $(document).ready(function() {
         $("#blah span").click(function() {
             $(this).find("input").prop('checked',true);
         });
 });

Code (markup):

This assumes that you have a form-id, but you can simply use $("form span") if you only have one form you need to do this on.

 

as PoPSiCle said, this is pretty much "js for nothing and your scripts for free... that ain't workin, and that's not how you do it."

Of course it would help if you had a PROPERLY formed... form. SPAN is entirely the wrong tag, what you want is LABEL -- and if labels have a 'FOR' attribute pointing at an ID on a INPUT, click on the label, it selects the input! (which I THINK is what you are trying to do). Why the blue blazes would you use garbage non-semantic half-assed markup without label/for? What possible reason could you have for that?!?

Of course if all your span are getting the same class, NONE of them should have classes, inherit off the parent instead! (like say... a fieldset since that's what you have, a set of related fields!)

This:

<fieldset>
	<legend>Describe what these buttons select here!</legend>
	<input type="radio" name="LIST9" value="10" id="list9_megetEnig" />
	<label for="list9_megetEnig">Meget enig</label><br />
	<input type="radio" name="LIST9" value="11" id="list9_enig" />
	<label for="list9_enig">Enig</label><br />
	<input type="radio" name="LIST9" value="12" id="list9_hverkenEller" />
	<label for="list9_hverkenEller">Hverken eller</label><br />
	<input type="radio" name="LIST9" value="13" id="list9_uenig" />
	<label for="list9_uenig">Uenig</label><br />
	<input type="radio" name="LIST9" value="14" id="list9_megetUenig" />
	<label for="list9_megetUenig">Meget uenig</label><br />
	<input type="radio" name="LIST9" value="15" id="list9_vedIkke" />
	<label for="list9_vedIkke">Ved ikke</label>
</fieldset>

Code (markup):

...is how to PROPERLY form that markup, and I believe does exactly what you're trying to waste JavaScript doing. What possible reason do you have for crapping out non-semantic span and throwing 'scripting for nothing at it'?!? (almost sounds like some sort of idiotic classwork or something)

 

All right - thanks for the responses, i'll check out PoPSiCle's solution when i'm back at work.

However, deathshadow, the reason i'm trying to do it like this is, that the old interviewing system that we're using spits out all of this code (and we cannot edit it). We just define the response lists (in this case 'Meget enig', 'Enig' etc..) and all the other things are autogenerated. So there's no id's on the inputs for starters. But i've got jQuery adding id's to all inputs with the id=value. However, these values are dynamic depending on what else is being shown to the respondent. In most cases the first answer will have value 10 (and therefore id=10), and then we can write "<label for="10">Meget enig</label>" and so on in our program. But when the values can shift around, it would be nice to work around this solution and just making the entire span clickable. Furthermore, some browsers doesn't support images in <label> and that's kind of a dealbreaker.

So i know it's idiotic, but i can't really do much about it, as we can't afford to upgrade the system. Therefore i have to make this work somehow.

 

Whenever I hear things like that, I really wonder "what do you mean you can't edit it?!?" -- is it built in a compile language like C or behind some sort of rubbish 'obfuscation scam' like IonCube?

Dicking around with throwing more code at it in the form of JavaScript isn't the right answer -- you'll likely spend more time alienating users and making things worse that you would sucking it up and rewriting the entire thing from scratch.

 

Well that would be the best solution. But as we are just 3 employees working almost 24/7 there is no time for rewriting an entire system. And yes, it is built in a compile language that we have no idea how to acces or rewrite.

But if you are willing to work for free, i'd be glad to hand it over to you

 

Well, if you can't modify the markup why not... modify the markup? I know that sounds odd, but rather than playing with onclick, grab all the span, change them to labels... A label wrapping an input behaves the same as a for/id pair.

Normal scripting:

(function(d) {
	var
		sList = d.getElementsByTagName('span'),
		count = sList.length,
		check = RegExp('(\\s|^)mrSingleText(\\s|$)'),
		label, e, nf;
	while (count-- > 0) {
		if (check.test(sList[count].className)) {
			label = d.createElement('label');
			e = sList[count].firstChild;
			while (e) {
				n = e.nextSibling; /* the append screws up nextSibling */
				label.appendChild(e);
				e = n;
			}
			sList[count].parentNode.replaceChild(label, sList[count]);
		}
	}
})(document);

Code (markup):

You could run this right before </body> without waiting for onload... Though if you can't modify the markup, how are you including scripts?

 

Oh, BTW, the invalid markup in that code could prevent ANY scripting from working. The missing closing > before the textNodes? that's a problem. REALLY big problem.

 

All right - i have a bit of time tomotorers at work! Then i'll give it a go. Then i'll also post the entre code so you can see it. But it basically works like this: We create a .htm template in which we can write normal HTML, scripts etc.. But the form a autogenerated, as we just write "<mrData/displaytext>" and other similiar thing which are called through the interview system. So the code i pasted was from accessing an interview, viewing the source code an through this come up with a solution. I know it's tiredsome, but unfortunately it's not going to get better.

Just one question: dont' you then still run in to the problem with images not working in all browsers in the <label> tag?

 

What do you mean "images not working" inside label?!? no such thing I've ever heard of... There is no default render difference between a span and a label! Both are simply inline level containers; they just have different semantic meanings.

 

I mean, that in IE the images does not (on click) mark the radio/checkbox (http://snook.ca/archives/javascript/using_images_as).

I've just tried using your code, deathshadow, but it doesn't seem to be working. Would you take a look at it? The thought was, that it would replace the <span> tags with <label> tags, right?



<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("input[type=radio]").each(function() {
var getVal = $(this).val();
//$("input").attr('value',getVal);
$(this).attr('id',getVal);
});
});
$(document).ready(function() {

$("input[type=checkbox]").each(function() {
var getVal = $(this).val();
//$("input").attr('value',getVal);
$(this).attr('id',getVal);
});
});


$(document).ready(function(d) {
var
sList = d.getElementsByTagName('span'),
count = sList.length,
check = RegExp('(\\s|^)mrSingleText(\\s|$)'),
label, e, nf;
while (count-- > 0) {
if (check.test(sList[count].className)) {
label = d.createElement('label');
e = sList[count].firstChild;
while (e) {
n = e.nextSibling; /* the append screws up nextSibling */
label.appendChild(e);
e = n;
}
sList[count].parentNode.replaceChild(label, sList[count]);
}
}
});

</script>
</head>

<body>


<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=10>Meget enig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=11>Enig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=12>Hverken eller<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=13>Uenig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=14>Meget uenig<br></span><br>
<span class="mrSingleText"><input type=radio class="mrSingle" name=LIST9 value=15>Ved ikke</span>




</body>

</html>

 

Must be run AFTER the markup for it to work, otherwise the elements to be changed don't even exist yet. Move to to right before </body> and it will work fine.

Generally speaking, "modern" scripting has no business in HEAD. IF you can't put it in body, it'll have to be done at document.onload... which would suck.

Hmm... could be why what you were trying to do before wasn't working either -- script in the head that tries to change or manipulate existing elements have to wait for onload, on top of loading painfully slow -- that's why most the general consensus these days is that scripts don't belong in <head> anymore.

 

That works like a charm. Thanks ALOT!!!!

 

Okay - one last question. Our interview system doesn't register this for some reason, so i'm thinking it's because the 'mrSingleText'-class on the span tags are missing. So how can i add the class to the labels via the jQuery you provided?

 

One extra line of code, setting className:

(function(d) {
	var
		sList = d.getElementsByTagName('span'),
		count = sList.length,
		check = RegExp('(\\s|^)mrSingleText(\\s|$)'),
		label, e, nf;
	while (count-- > 0) {
		if (check.test(sList[count].className)) {
			label = d.createElement('label');
			label.className = 'mrSingleText';
			e = sList[count].firstChild;
			while (e) {
				n = e.nextSibling; /* the append screws up nextSibling */
				label.appendChild(e);
				e = n;
			}
			sList[count].parentNode.replaceChild(label, sList[count]);
		}
	}
})(document);

Code (markup):

Though for future reference, that's just javascript, no jQuery - so if you aren't doing anything with the jQuery elsewhere you could skip including that

 

Yeah all right. For some strange reason, it doesn't work in other browsers than IE. It does what it's supposed to, but our interviewing system doesn't register an answer this way. Even if i just replace the span with another span it messes up. Do you have any idea why this could be?

 

Might be some arbitrary check for which container is being used - however, that is insanely lame (but not unwarranted, if it's being output by some assinine C-something garbage app).

 

All right. So my last question: Is there any way to insert the "<label>" tag right after the <span> tag and the "</label>" tag to right before the </span> tag? So we don't edit the current markup but just add to it.