CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ervan
Ervan

Reputation: 91

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

Upvotes: 0

Views: 1589

Answers (3)

becher henchiri
becher henchiri

Reputation: 667

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>

Upvotes: -1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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>

Upvotes: 4

Bilal Siddiqui
Bilal Siddiqui

Reputation: 3629

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>

Upvotes: 1

Related Questions