title: getting value of radio button with jquery html5
body: <p>I am trying to get values of the radio button selected from the list of radio buttons with jquery and change the img beneath the radio buttons to the selected filter by mending the image src url</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  var bw = "c_fill,e_blackwhite,h_600,w_600";
   var sepia = "c_fill,e_sepia:70,h_600,w_600";
   var gamma = "c_fill,e_gamma:70,h_600,w_600";
   var full_light = "c_fill,e_vibrance:70,h_600,w_600";
   var vibrance = "c_fill,e_vibrance:70,h_600,w_600";
   var grayscale = "c_fill,e_vibrance:70,h_600,w_600";
   var gradient_fade = "c_fill,e_gradient_fade:40,h_600,w_600" ;
   
   var url = "http://res.cloudinary.com/hzxyensd5/image/upload/";
  
   var endurl = "/v1460195911/";
  
   var imgName = "";
  
  
  $(.kind_selection li).click(function(){
  
    alert($(".radio span").hasClass("checked"))
           //write your code         
           
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.kind_selection {
    list-style: none;
    margin: 0 0 0 5px;
    padding: 0; }
    .kind_selection:after {
      clear: both;
      content: "";
      display: block; }
    .kind_selection li {
      float: left;
      margin: 0 4px;
      width:  50px;
      cursor: pointer; }
      .kind_selection li .image {
        display: block;
        width:  50px;
        height: 50px;
        margin: 5px 0; }
      .kind_selection li .name {
        display: block;
        font-size: 11px;
        color: #aaaaaa;
        text-align: center; }
      .kind_selection li input[type=radio] {
        text-align: center;
        display: block;
        margin: 5px auto; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="kind_selection"&gt;
                &lt;li class="normal"&gt;
                  &lt;label for="kind_field_normal"&gt;
                    &lt;span class="name"&gt;Normal&lt;/span&gt;
                    &lt;span class="image"&gt;&lt;img width="50" height="50" src="http://res.cloudinary.com/hzxyensd5/image/upload/h_133,r_20,w_200/fl_relative,g_center,l_logo_watermark,o_40,w_0.9/v1460195911/yhrufkspopnm6tbiyd89.jpg"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input checked="" id="kind_field_normal" name="kind" type="radio" value="normal"&gt;
                &lt;/li&gt;
                &lt;li class="natural"&gt;
                  &lt;label for="kind_field_natural"&gt;
                    &lt;span class="name"&gt;Natural&lt;/span&gt;
                    &lt;span class="image"&gt;&lt;img width="50" height="50" src="http://res.cloudinary.com/hzxyensd5/image/upload/c_fill,g_face,h_133,r_20,w_200/fl_relative,g_center,l_logo_watermark,o_40,w_0.9/v1460195911/yhrufkspopnm6tbiyd89.jpg"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input id="kind_field_natural" name="kind" type="radio" value="natural"&gt;
                &lt;/li&gt;
                &lt;li class="sepia"&gt;
                  &lt;label for="kind_field_sepia"&gt;
                    &lt;span class="name"&gt;Sepia&lt;/span&gt;
                    &lt;span class="image"&gt;&lt;img width="50" height="50" src="http://res.cloudinary.com/hzxyensd5/image/upload/c_fill,e_sepia,g_face,h_133,r_20,w_200/fl_relative,g_center,l_logo_watermark,o_40,w_0.9/v1460195911/yhrufkspopnm6tbiyd89.jpg"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input id="kind_field_sepia" name="kind" type="radio" value="sepia"&gt;
                &lt;/li&gt;
                &lt;li class="improved"&gt;
                  &lt;label for="kind_field_improved"&gt;
                    &lt;span class="name"&gt;Improved&lt;/span&gt;
                    &lt;span class="image"&gt;&lt;img width="50" height="50" src="http://res.cloudinary.com/hzxyensd5/image/upload/c_fill,e_improve,g_face,h_133,r_20,w_200/fl_relative,g_center,l_logo_watermark,o_40,w_0.9/v1460195911/yhrufkspopnm6tbiyd89.jpg"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input id="kind_field_improved" name="kind" type="radio" value="improved"&gt;
                &lt;/li&gt;
                &lt;li class="blue"&gt;
                  &lt;label for="kind_field_blue"&gt;
                    &lt;span class="name"&gt;Blue&lt;/span&gt;
                    &lt;span class="image"&gt;&lt;img width="50" height="50" src="http://res.cloudinary.com/hzxyensd5/image/upload/c_fill,e_hue:70,g_face,h_133,r_20,w_200/e_blue:40/fl_relative,g_center,l_logo_watermark,o_40,w_0.9/v1460195911/yhrufkspopnm6tbiyd89.jpg"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input id="kind_field_blue" name="kind" type="radio" value="ue"&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              
               &lt;div class="modal-head"&gt;
  
                  &lt;img width="200" height="200" src="http://res.cloudinary.com/hzxyensd5/image/upload/c_fill,e_hue:70,g_face,h_133,r_20,w_200/e_blue:40/fl_relative,g_center/v1460195911/yhrufkspopnm6tbiyd89.jpg"&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>`</p>
  
  <p><a href="https://jsfiddle.net/brg1zhtc/" rel="nofollow">JSFiddle URL</a></p>