javascript - 选中时如何更改包含单选按钮的div的边框

Question

我有一段代码用于检查包含在 div 中的单选按钮，单击 div 中的任意位置以选择产品。我需要添加边框，因为 div 是一张照片，我隐藏了按钮，因此它不在照片中，我需要我的客户知道它已被选中。代码是:

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

另外，我想知道这段代码是否容易受到攻击，因为脚本正在更改检查。提前致谢!

新:我认为我的原始问题和代码由于以下代码而变得困惑。

$('input:radio').filter(':checked').parent().addClass('checked');

那只是我对如何获得边框的猜测，我并不是故意让它出现在我发布的代码中。我猜想完成边框的方法是添加一个名为“checked”的类，我可以在我的 css 中设置它的样式。我没听说过下面的 .css 答案。我认为下面提出的 .css 答案使得对下面一行的需求变得毫无用处，因为边框显示与没有该行的脚本一样。

$('input:radio').filter(':checked').parent().addClass('checked');

然而，我将代码编辑为tchoow002建议的以下代码，但我仍然有问题。当用户在预先选择一个选项后单击另一个选项时，即使选择了新选项，边框也会保持红色。返回的值是正确的，但第一个选项的红色边框保持不变。

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

我尝试将代码添加到下面的 else 语句中，但没有成功。同样在我发布的原始代码上

$('input:radio').filter(':checked').parent().removeClass('checked');

Answer 1

使用.css()

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.

因此，如果您想为复选框的父 div 设置边框的 css 属性，您可以这样做:

添加边框:checkbox.parent().css("border","1px solid red")

移除边框:checkbox.parent().css("border","none")

像这样:

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");
}

或者

使用 .addClass 添加一个额外的包含边框的 css 类。

和 .removeClass 删除它