Измените цвет границы в установленном переключателе

Question

Я хочу изменить цвет границы при нажатии кнопки-переключателя, но проблема в количестве кнопок, идентификатор не может быть предсказан, кто-нибудь может помочь? это грязный код, который я сделал,

html

<div id='box1' class='box'><input id='grijs' type="radio" name="color" value="grijs">1</div>
<div id='box2' class='box'><input id='sepia' type="radio" name="color" value="sepia">2</div>
<div id='box3' class='box'><input id='normal' type="radio" name="color" value="normal">3</div>

javascript

$('input[type=radio]').change(function() {    
    if($(this).attr("id") == "grijs"){   
        $('#box1').removeClass('box').addClass('selected');
      $('#box2').removeClass().addClass('box');
      $('#box3').removeClass().addClass('box');
    }
    else if($(this).attr("id") == "sepia"){
      $('#box2').removeClass('box').addClass('selected');
      $('#box1').removeClass().addClass('box');
      $('#box3').removeClass().addClass('box');
    }
    else if($(this).attr("id") == "normal"){
      $('#box3').removeClass('box').addClass('selected');
      $('#box1').removeClass().addClass('box');
      $('#box2').removeClass().addClass('box');
    }
});

css

.box {
  border :1px solid red;
  width:10%;
}

.selected {
  border :1px solid blue;
  width:10%;
}

codepen: https://codepen.io/ervannnn/pen/QWWwLZM

любая помощь будет оценена, спасибо

Answer 1

Вы можете поместить универсальный код там, где вам не нужно идентифицировать идентификатор родительского div переключателя, на который нажали. Ниже приведен код, в котором вы можете удалить класс selected из div, содержащего этот класс, и добавить его в родительский div переключаемой кнопки.

$(function(){
$('input[type=radio]').change(function() {    
    $('.selected').removeClass('selected').addClass('box');
    $(this).closest('div').removeClass('box').addClass('selected');
});
});

.box {
  border :1px solid red;
  width:10%;
}

.selected {
  border :1px solid blue;
  width:10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id='box1' class='box'><input id='grijs' type="radio" name="color" value="grijs">1</div>
<div id='box2' class='box'><input id='sepia' type="radio" name="color" value="sepia">2</div>
<div id='box3' class='box'><input id='normal' type="radio" name="color" value="normal">3</div>

РЕДАКТИРОВАТЬ : чтобы сделать решение более надежным, вы можете добавить любой класс, чтобы определить правильный родительский div и который делаетне измениться по сценарию. Приведенный ниже скрипт гарантирует, что вы всегда получите правильный div, даже когда измените структуру html.

Я добавил класс radioparent для css, чтобы идентифицировать родительский div и использовать класс переключения для переключения между боксом и выбранными классами.

$(function(){
$('input[type=radio]').change(function() {    
    $('.selected').toggleClass('selected box');
    $(this).closest('div.radioparent').toggleClass('selected box');
});
});

.box {
  border :1px solid red;
  width:10%;
}

.selected {
  border :1px solid blue;
  width:10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id='box1' class='radioparent box'><input id='grijs' type="radio" name="color" value="grijs">1</div>
<div id='box2' class='radioparent box'><input id='sepia' type="radio" name="color" value="sepia">2</div>
<div id='box3' class='radioparent box'><input id='normal' type="radio" name="color" value="normal">3</div>

Answer 2

Вы можете использовать [id ^ = box], чтобы переключать классы для всех div с помощью переключателей, а затем помечать выбранное текущим.

$(function(){
    $('input[type=radio]').change(function() {    
        // toggles classes for all divs containing radio buttons and id starts with `box`
        $('[id^=box]').addClass('box').removeClass('selected');
        // toggles classes of clicked radio button's parent div
        $(this).parent().removeClass('box').addClass('selected');
    });
});

.box {
  border :1px solid red;
  width:10%;
}

.selected {
  border :1px solid blue;
  width:10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id='box1' class='box'><input id='grijs' type="radio" name="color" value="grijs">1</div>
<div id='box2' class='box'><input id='sepia' type="radio" name="color" value="sepia">2</div>
<div id='box3' class='box'><input id='normal' type="radio" name="color" value="normal">3</div>

Answer 3

С простой логикой: снимите флажок All Class и добавьте класс «Box», затем поместите «выбранный» класс в правое поле

    $('input[type=radio]').change(function() {    
        $('.selected').removeClass().addClass('box');
        $(this).parent().addClass('selected');
    });

.box {
  border :1px solid red;
  width:10%;
}

.selected {
  border :1px solid blue;
  width:10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box1' class='box'><input id='grijs' type="radio" name="color" value="grijs">1</div>
<div id='box2' class='box'><input id='sepia' type="radio" name="color" value="sepia">2</div>
<div id='box3' class='box'><input id='normal' type="radio" name="color" value="normal">3</div>
<div id='box4' class='box'><input id='normal' type="radio" name="color" value="normal">4</div>
<div id='box5' class='box'><input id='normal' type="radio" name="color" value="normal">5</div>
<div id='box6' class='box'><input id='normal' type="radio" name="color" value="normal">6</div>