Change The Border Color In Checked Radio Button

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 th

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><divid='box1'class='box'><inputid='grijs'type="radio"name="color"value="grijs">1</div><divid='box2'class='box'><inputid='sepia'type="radio"name="color"value="sepia">2</div><divid='box3'class='box'><inputid='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%;
}

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

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

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

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

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