在选中的单选按钮中更改边框颜色 [英] Change the border color in checked radio button
问题描述
单击单选按钮时，我想更改边框颜色，但是问题是按钮的数量，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%;
}
codepen: https://codepen.io/ervannnn/pen/QWWwLZM
任何帮助将不胜感激，谢谢
您可以将通用代码放在不需要标识单击的单选按钮的父div ID的位置.
请参见下面的代码，您可以在其中从包含该类的div中删除selected类，并将其添加到单击的单选按钮的父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>
编辑:为使解决方案更强大，您可以添加任何类来标识正确的父div，并且该类不会因脚本而被更改.下面的脚本可确保即使更改html结构，也始终能获得正确的div.
我添加了"radioparent" css类以标识父div，并使用toggle类在box类和选定类之间进行切换
$(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>
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
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>
这篇关于在选中的单选按钮中更改边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
