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

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) { $(".image-radio-checked").each(function(i){ $(this).removeClass("image-radio-checked"); }); $(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

它似乎對我有用。 您遇到了一些js錯誤，因為您沒有在小提琴中添加jquery ...在這里嘗試： 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>