gosulove gosulove - 8 days ago 6
HTML Question

Jquery failed to change Div border colour

I am trying to implement "changing Div border color" when clicking on one of the radio buttons. It works well for scenario 1 but won't work on scenario 2.

enter image description here



$(":radio:checked").closest(".discount").addClass("checked");
$(":radio").on("change", e => {
const $div = $(e.target).closest(".discount");
console.log($div);
$(".discount").removeClass("checked");
$div.addClass("checked");
});

$(":radio:checked").closest(".discount2").addClass("checked");
$(":radio").on("change", e => {
const $div = $(e.target).closest(".discount2");
console.log($div);
$(".discount2").removeClass("checked");
$div.addClass("checked");
});

.discount {
border: 2px solid #cccccc;
padding: 2px;
padding: 10px;
width: 100%;
text-align: center;
border-radius: 5px;
}
.discount.checked {
border-color: red;
}
.discount2 {
border: 2px solid #cccccc;
padding: 2px;
padding: 10px;
width: 100%;
text-align: center;
border-radius: 5px;
}
.discount2.checked {
border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label style="width:100%">
<div class="discount">
<input type="radio" name="fruits" checked>Apple</div>
</label>
<label style="width:100%">
<div class="discount">
<input type="radio" name="fruits">Banana</div>
</label>

<label style="width:100%">
<div class="discount2">
<input type="radio" name="drinks" checked>Milk</div>
</label>
<label style="width:100%">
<div class="discount2">
<input type="radio" name="drinks">Zzz</div>
</label>
<label style="width:100%">
<div class="discount2">
<input type="radio" name="drinks">Bbb</div>
</label>





In scenario 2, when clicking on 'Zzz', the Div border "Red" is gone! Anyone know whats wrong ?

Answer

There is no need to use multiple clases and such:

(I added another version of the example, where no <div>s were used (and changed the coloring a bit)

$('input[type=radio]:checked').parent().addClass('checked');
$('input[type=radio]').on('change',function(e) {
  var thisGroup = $(this).attr('name');
  if ($(this).is(':checked')) {
    $('input[name='+thisGroup+']').parent().removeClass('checked');
    $(this).parent().addClass('checked');
    }
 });
.discount, .discount-label{
    border: 2px solid #cccccc;
    padding:2px;
    padding:10px;
    width:10%;
    text-align:center;
    border-radius: 5px;
}

.discount.checked,.discount-label.checked {
    border-color: red;
}
.discount-label input[type=radio] {
  display: none;
  }
.discount-label.checked {
  background: red;
  color: #FFF;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><div class="discount"><input type="radio" name="fruits" checked>Apple</div></label>
<label><div class="discount"><input type="radio" name="fruits">Banana</div></label>

<label><div class="discount"><input type="radio" name="drinks" checked>Milk</div></label>
<label><div class="discount"><input type="radio" name="drinks">Zzz</div></label>
<label><div class="discount"><input type="radio" name="drinks">Bbb</div></label>

<h2>example two</h2>
<label class="discount-label"><input type="radio" name="fruits2" checked>Apple</label>
<label class="discount-label"><input type="radio" name="fruits2">Banana</label>

<label class="discount-label"><input type="radio" name="drinks2" checked>Milk</label>
<label class="discount-label"><input type="radio" name="drinks2">Zzz</label>
<label class="discount-label"><input type="radio" name="drinks2">Bbb</label>