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

Question

I want to change the border color when the radio button is clicked, but the problem is the number of buttons, the id cannot be predicted, can anyone help? this is the dirty code that I made,

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

any help will be appreciated, thank you

Answer 1

You can put generic code where you don't need to identify the id of clicked radio button's parent div. See below code where you can remove selected class from the div containing that class and add it to the clicked radio button's parent 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>

EDIT : to make the solution more robust, you can add any class to identify the correct parent div and which does not get alter by script. Below script will ensure that you get the correct div always even when you alter the html structure.

I have added 'radioparent' css class to identify the parent div and use toggle class to make toggling between box and selected classes

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

You can use [id^=box] to toggle classes for all divs with radio buttons and then mark selected to current.

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

With simple logic: Remove box All Class and add "Box" Class,then push "selected" class in right 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>