I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code:
<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 am concerned about the security vulnerability in my current code as it changes the checked status. Thank you for your help!
New: I believe I may have confused my original question and code with this specific part:
$('input:radio').filter(':checked').parent().addClass('checked');
This was just my attempt at adding a border effect using a CSS class named "checked". The solution suggested below involving .css might render this line unnecessary as the border would still show up without it.
However, I modified the code based on tchoow002's suggestion, but encountered an issue. When the user selects a different option after choosing one previously, the red border from the first choice remains even though the new one is selected. The correct value is returned, but the old selection retains the red border.
<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 attempted to incorporate the given code into the else statement, but it did not resolve the issue. Additionally, in the original code snippet,
$('input:radio').filter(':checked').parent().removeClass('checked');