toolmantim/really annoying IE radio name bug.html

## really annoying IE radio name bug.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Really annoying IE6/7 radio name bug</title>
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(function() {
      // Create some using clone
      for(var i=0; i<3; i=i+1) {
        $("input[name='template']").clone()
          // Set a unique name
          .attr("name", "input-" + $("input").length)
          .appendTo("body");
      }

      $("<p/>").text("Now we'll use outerHTML to add some:").appendTo("body");

      // Create some using outerHTML
      for(var i=0; i<3; i=i+1) {
        var newRadioHTML = $("input[name='template']").attr("outerHTML");
        newRadioHTML = newRadioHTML.replace('template','input-' + $("input").length);
        $("body").append(newRadioHTML);
      }

      $("input").live("click", function() {
        $("<p/>").text($(this).attr("name") + " clicked").appendTo("body");
      });
    });
  </script>
</head>
<body>
  <input name="template" type="radio">
  <p>Here we should have a bunch of independently checkable radio buttons:</p>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Really annoying IE6/7 radio name bug</title>
	<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(function() {
	// Create some using clone
	for(var i=0; i<3; i=i+1) {
	$("input[name='template']").clone()
	// Set a unique name
	.attr("name", "input-" + $("input").length)
	.appendTo("body");
	}

	$("<p/>").text("Now we'll use outerHTML to add some:").appendTo("body");

	// Create some using outerHTML
	for(var i=0; i<3; i=i+1) {
	var newRadioHTML = $("input[name='template']").attr("outerHTML");
	newRadioHTML = newRadioHTML.replace('template','input-' + $("input").length);
	$("body").append(newRadioHTML);
	}

	$("input").live("click", function() {
	$("<p/>").text($(this).attr("name") + " clicked").appendTo("body");
	});
	});
	</script>
	</head>
	<body>
	<input name="template" type="radio">
	<p>Here we should have a bunch of independently checkable radio buttons:</p>
	</body>
	</html>