單擊時突出顯示圖像，然後選中單選按鈕

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>