highlight image when clicked on then check a radio button

Question

You know those sites that have an image as a checkbox and which ever image is checked gets highlighted? I'm trying to do the same, but instead with a radio button and I can't seem to get it to work. Here's my code:

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

Do you have to use the radio buttons? If not, just keep the state in the script like you already do. When you click an image change the state to active and check the other images for being active. If one is, set it to inactive. Then, if you need the radio buttons, you can change their state with the same function.

EDIT: Fiddled a little: https://jsfiddle.net/dwc6gf4q/41/

As far as i understood, works like you wanted.

 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

It seems to be working to me. You had some js errors because you weren't adding jquery to the fiddle...try here: https://jsfiddle.net/dwc6gf4q/6/

added jquery to fiddle

Answer 3

We can also do this using CSS just need to put IMG code after the radio button.

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