在選中的單選按鈕中更改邊框顏色

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>