Question

我正在尝试从jquery的单选按钮列表中选择单选按钮的值，并通过修复图像src url将单选按钮下的img更改为所选的过滤器

<script>
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         
         
});
</script>

.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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="kind_selection">
              <li class="normal">
                <label for="kind_field_normal">
                  <span class="name">Normal</span>
                  <span class="image"><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"></span>
                </label>
                <input checked="" id="kind_field_normal" name="kind" type="radio" value="normal">
              </li>
              <li class="natural">
                <label for="kind_field_natural">
                  <span class="name">Natural</span>
                  <span class="image"><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"></span>
                </label>
                <input id="kind_field_natural" name="kind" type="radio" value="natural">
              </li>
              <li class="sepia">
                <label for="kind_field_sepia">
                  <span class="name">Sepia</span>
                  <span class="image"><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"></span>
                </label>
                <input id="kind_field_sepia" name="kind" type="radio" value="sepia">
              </li>
              <li class="improved">
                <label for="kind_field_improved">
                  <span class="name">Improved</span>
                  <span class="image"><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"></span>
                </label>
                <input id="kind_field_improved" name="kind" type="radio" value="improved">
              </li>
              <li class="blue">
                <label for="kind_field_blue">
                  <span class="name">Blue</span>
                  <span class="image"><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"></span>
                </label>
                <input id="kind_field_blue" name="kind" type="radio" value="ue">
              </li>
            </ul>
            
             <div class="modal-head">

                <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">
            </div>

`

JSFiddle URL

Answer 1

以下将访问正确的单选按钮值，您应该能够从那里开始工作：

$('.kind_selection li').click(function(){

  alert($('input[name="kind"]:checked').val())
         //write your code         

});

在这里小提琴：https://jsfiddle.net/2dwvv5Ln/

使用jquery html5获取单选按钮的值

1 个答案: