RadioButtonList Sample With JQuery

HTML, Javascript Code
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <meta charset="utf-8" />
    <title>Radio List Sample</title>
    <style>
        #frame-list
        {
            padding: 5px;
        }
        .frame
        {
            border: 1px solid silver;
            padding: 8px;
            margin-bottom: 3px;
        }
        .inner-frame
        {
            border: 1px solid lightgray;
            padding: 8px;
        }
        .result
        {
            width: 100%;
            height: 25px;
            text-align: right;
        }
        #result
        {
            width: 250px;
            margin-right: 10px;
        }
    </style>
    <script>
        $(document).ready(
  function () {

      var radio_inputs = $(".inner-frame input:radio");
      var result = $("#result");

      $(".inner-frame input").click(function () {
          result.text($(radio_inputs).index($(this)) + 1);
      });

      $(".inner-frame").each(function () {
          var radio = $(this).find("input:radio");

          $(this).click(function () {
              radio.attr("checked", "checked");
              result.text($(radio_inputs).index(radio) + 1);
          });
      });

      $(".inner-frame").hover(
      function () {

          $(this).css({
              "background-color": "silver",
              "border-color": "gray"
          });

          var sp = $(this).find("span");

          sp.animate({
              "margin-left": "20px"
          }, 300,
          function () {
              sp.css("color", "white");
          });

      },
      function () {

          $(this).css({
              "border-color": "silver"
          });

          var sp = $(this).find("span");

          sp.animate({
              "margin-left": "0px"
          }, 300,
          function () {
              sp.css("color", "black");
              sp.parent().css("background-color", "white");
          });

      }
    );

  });
</script>
</head>
<body>
    <div class="result">
        <span id="result">Kay?t bulunamad?.</span>
    </div>
    <div id="frame-list">
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 1</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 2</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 3</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 4</span>
            </div>
        </div>
    </div>
</body>
</html>