[英]How to change border of div containing radio button when checked
I have a piece of code I use to check a radio button contained in a div where anywhere in the div is clicked to choose a product. 我有一段代码,用于检查div中包含的单选按钮,单击div中的任何位置以选择产品。 I need to add a border because the div is a photo and I have hidden the button so it is not in the photo and I need my customer to know it is checked.
我需要添加边框,因为div是一张照片,并且我已隐藏了该按钮,因此该按钮不在照片中,并且我需要我的客户知道它已被选中。 The code is:
代码是:
<script type='text/javascript'>//<![CDATA[
$("div.div-check").on("click",function(event) {
var target = $(event.target);
if (target.is('input:radio')) return;
var checkbox = $(this).find("input[type='radio']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
$('input:radio').filter(':checked').parent().addClass('checked');
} else {
checkbox.prop("checked",false);
}
});
//]]>
</script>
Also, I was wondering if this code is vulnerable since the script is changing the checked. 另外,我想知道此代码是否易受攻击,因为脚本正在更改选中的代码。 Thanks in advance!
提前致谢!
New: I think my original question and code was made confusing by me because of the following piece of my code. 新增:我认为我的原始问题和代码由于以下代码而使我感到困惑。
$('input:radio').filter(':checked').parent().addClass('checked');
That was just my guess at how to get the border and I didn't mean for it to be in the code I posted. 那只是我对如何获得边界的猜测,我并不意味着它会出现在我发布的代码中。 I was guessing the way to accomplish the border was to add a class called "checked" which I could style in my css.
我猜测完成边框的方法是添加一个称为“ checked”的类,可以在CSS中设置样式。 The .css answer below I had not heard of.
我没有听说过的.css答案。 I think the .css answer posed below made the need for the line below useless as the border shows just the same as a script without that line.
我认为下面提出的.css答案使对下面这一行的需求无济于事,因为边框显示的内容与没有该行的脚本相同。
$('input:radio').filter(':checked').parent().addClass('checked');
However, I edited the code to the code below suggested by tchoow002, but I still have a problem. 但是,我将代码编辑为tchoow002建议的以下代码,但是仍然存在问题。 When a user clicks another choice after choosing a choice beforehand, the border stays red even though the new choice is selected.
当用户在预先选择一个选项之后单击另一个选项时,即使选择了新选项,边框仍保持红色。 The value returned is correct but the red border on the first choice stays on.
返回的值是正确的,但第一个选择上的红色边框仍然保留。
<script type='text/javascript'>//<![CDATA[
$("div.div-check").on("click",function(event) {
var target = $(event.target);
if (target.is('input:radio')) return;
var checkbox = $(this).find("input[type='radio']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
$('input:radio').filter(':checked').parent().addClass('checked');
checkbox.parent().css("border","1px solid red");
} else {
checkbox.prop("checked",false);
checkbox.parent().css("border","none");
}
});
//]]>
</script>
I tried adding the code to the else statement below but it did not work. 我尝试将代码添加到下面的else语句中,但是没有用。 Also on the original code I posted
同样在我发布的原始代码上
$('input:radio').filter(':checked').parent().removeClass('checked');
Use .css() to get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
使用.css()可以为匹配元素集中的第一个元素获取样式属性的值,或者为每个匹配元素设置一个或多个CSS属性。
So if you wanted to set the css property for border for your checkbox's parent div you could do: 因此,如果您想为复选框的父div的边框设置css属性,则可以执行以下操作:
To add the border: checkbox.parent().css("border","1px solid red")
要添加边框:
checkbox.parent().css("border","1px solid red")
To remove the border: checkbox.parent().css("border","none")
删除边框:
checkbox.parent().css("border","none")
Like this: 像这样:
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
$('input:radio').filter(':checked').parent().addClass('checked');
checkbox.parent().css("border","1px solid red");
$('input:radio').not(':checked').parent().removeClass('checked').css("border", "none"); //Remove border and checked class from all other radios that are not checked
} else {
checkbox.prop("checked",false);
checkbox.parent().removeClass('checked'); //remove checked class when clicked twice
checkbox.parent().css("border","none");
}
Or 要么
Use .addClass
to add an additional css class that contains your border. 使用
.addClass
添加包含边框的其他CSS类。
And .removeClass
to remove it 和
.removeClass
删除它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.