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

使用.css（）获取匹配元素集中第一个元素的样式属性值，或者为每个匹配元素设置一个或多个CSS属性。

因此，如果您想为复选框的父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将其删除

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

1 个答案: