单击时突出显示图像，然后选中单选按钮

Question

您知道那些将图像作为复选框并检查哪个图像的站点会突出显示吗？我试图做同样的事情，但是用单选按钮，我似乎无法使它工作。这里是我的代码：

HTML

<div class="well"> 
<div class="row"> 
      <div class="col-lg-4"> 
       <label class="image-radio"> 
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
        <input type="radio" name="style" value="option1" /> 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
       </label> 
      </div> 
      <div class="col-lg-4"> 
       <label class="image-radio"> 
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
        <input type="radio" name="style" value="option2" /> 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
       </label> 
      </div> 
      <div class="col-lg-4"> 
       <label class="image-radio"> 
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
        <input type="radio" name="style" value="option3" /> 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
       </label> 
      </div> 
      </div> 
</div> 

CSS

.image-radio { 
    cursor:pointer; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    border:4px solid transparent; 
    outline:0; 
} 

.image-radio input[type="radio"] { 
    display:none; 
} 

.image-radio-checked { 
    border-color:#f58723; 
} 

input[type=radio] { 
    display:none; 
} 

.item-detail .item-price { 
    font-weight:bold; 
    color:#201E20; 
    padding-bottom:10px; 
} 

的JavaScript

jQuery(function ($) { 
     // init the state from the input 
     $(".image-radio").each(function() { 
      if ($(this).find('input[type="radio"]').first().attr("checked")) { 
       $(this).addClass('image-radio-checked'); 
      } 
      else { 
       $(this).removeClass('image-radio-checked'); 
      } 
     }); 

     // sync the state to the input 
     $(".image-radio").on("click", function (e) { 
      if ($(this).hasClass('image-radio-checked')) { 
       $(this).removeClass('image-radio-checked'); 
       $(this).find('input[type="radio"]').first().removeAttr("checked"); 
      } 
      else { 
       $(this).addClass('image-radio-checked'); 
       $(this).find('input[type="radio"]').first().attr("checked", "checked"); 
      } 

      e.preventDefault(); 
     }); 
    }); 

的jsfiddle：https://jsfiddle.net/dwc6gf4q/5/

Answer 1

你有利用无线电按钮？如果不是，就像你已经做过的那样保持脚本的状态。当您单击图像时，将状态更改为活动状态，并检查其他图像是否处于活动状态。如果是，请将其设置为不活动。 然后，如果您需要单选按钮，则可以使用相同的功能更改其状态。

编辑：东凑一点：https://jsfiddle.net/dwc6gf4q/41/

据我了解，就像你想要的。

jQuery(function ($) { 
 
     // init the state from the input 
 

 
     // sync the state to the input 
 
     $(".image-radio").on("click", function (e) { 
 
     \t \t $(".image-radio-checked").each(function(i){ 
 
      \t \t $(this).removeClass("image-radio-checked"); 
 
      }); 
 
\t  $(this).toggleClass("image-radio-checked"); 
 
      e.preventDefault(); 
 
      
 
     }); 
 
    });

.image-radio { 
 
    cursor:pointer; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    border:4px solid transparent; 
 
    outline:0; 
 
} 
 

 
.image-radio input[type="radio"] { 
 
    display:none; 
 
} 
 

 
.image-radio-checked { 
 
    border: 4px solid #f58723; 
 
} 
 

 
input[type=radio] { 
 
    display:none; 
 
} 
 

 
.item-detail .item-price { 
 
    font-weight:bold; 
 
    color:#201E20; 
 
    padding-bottom:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="well"> 
 
<div class="row"> 
 
      <div class="col-lg-4"> 
 
       <label class="image-radio"> 
 
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
 
        <input type="radio" name="style" value="option1" /> 
 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
 
       </label> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <label class="image-radio"> 
 
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
 
        <input type="radio" name="style" value="option2" /> 
 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
 
       </label> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <label class="image-radio"> 
 
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
 
        <input type="radio" name="style" value="option3" /> 
 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
 
       </label> 
 
      </div> 
 
      </div> 
 
</div>

Answer 2

它似乎对我有用。因为你不加入jQuery来拨弄你有一些JS错误...试一下：https://jsfiddle.net/dwc6gf4q/6/

added jquery to fiddle 

Answer 3

我们也可以做到这一点使用CSS只需要把IMG代码的单选按钮后。

.image-radio { 
 
    cursor:pointer; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    border:4px solid transparent; 
 
    outline:0; 
 
} 
 

 
.image-radio input[type="radio"] { 
 
visibility:hidden; 
 
} 
 

 
.image-radio img {display:none;} 
 
.image-radio input[type="radio"]:checked ~ img {display:block;} 
 
.image-radio-checked { 
 
    border-color:#f58723; 
 
} 
 

 
input[type=radio] { 
 
    display:none; 
 
} 
 

 
.item-detail .item-price { 
 
    font-weight:bold; 
 
    color:#201E20; 
 
    padding-bottom:10px; 
 
}

<div class="well"> 
 
<div class="row"> 
 
      <div class="col-lg-4"> 
 
       <label class="image-radio"> 
 
        
 
        <input type="radio" name="style" value="option1" /> 
 
       <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
 
       </label> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <label class="image-radio"> 
 
        
 
        <input type="radio" name="style" value="option2" /> 
 
       <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
 
       </label> 
 
      </div> 
 
      <div class="col-lg-4"> 
 
       <label class="image-radio"> 
 
        
 
        <input type="radio" name="style" value="option3" /> 
 
       <img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" /> 
 
        <div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div> 
 
       </label> 
 
      </div> 
 
      </div> 
 
</div>