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代码即可。

<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>

{{1}}

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

3 个答案: