title: Change radio button value on click of a div in jquery/javascript
body: <p>I am currently trying to create a multiple choice activity in which users select one of several answers with radio buttons next to them. I have been able to get the radio buttons to change by explicitly writing out the code like so:</p>
  
  <pre><code>$("#choice0").on('click', function(){
      $("input[name=radioAwnser][value=0]").attr("checked","checked");
      console.log("clicked a");
  });
  
  $("#choice1").on('click', function(){
      $("input[name=radioAwnser][value=1]").attr("checked","checked");
      console.log("clicked b");
  });
  
  $("#choice2").on('click', function(){
      $("input[name=radioAwnser][value=2]").attr("checked","checked");
      console.log("clicked c");
  });
  </code></pre>
  
  <p>However, I will not necessarily know how many answers there will be. When I tried to write something more flexible:</p>
  
  <pre><code>function setUpAwnsers(){
      for(var i = 0; i&lt;=3 ; i++){
          console.log("#choice" + i);
          $("#choice" + i).on('click', function(){
              $("input[name=radioAwnser][value=" + i +"]").attr("checked","checked");
              console.log("clicked");
          });
      }
  }
  </code></pre>
  
  <p>The console responds with "clicked" when I click the div, but the radio button does not change. </p>
  
  <p>Is there something simple I am missing, or a better way to solve this problem?</p>