在选中的单选按钮中更改边框颜色

Question

我想在单击单选按钮时更改边框颜色，但问题是按钮数量，id无法预测，谁能帮忙？ 这是我写的脏代码，

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%;
}

代码笔： https://codepen.io/ervannnn/pen/QWWwLZM

任何帮助将不胜感激，谢谢

Answer 1

您可以将通用代码放在不需要识别单击的单选按钮父 div 的 id 的地方。 请参阅下面的代码，您可以在其中从包含该 class 的 div 中删除selected的 class 并将其添加到单击的单选按钮的父 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>

编辑：为了使解决方案更健壮，您可以添加任何 class 来识别正确的父 div 并且不会被脚本更改。 下面的脚本将确保您始终获得正确的 div，即使您更改 html 结构也是如此。

我添加了 'radioparent' css class 来识别父 div 并使用切换 class 在框和选定类之间切换

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

用简单的逻辑：删除框所有 Class 并添加“框” Class，然后将“选定” class 推入右侧框

 $('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>