CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1647567
user1647567

Reputation: 3

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. 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. 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. The .css answer below I had not heard of. 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.

$('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. 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. Also on the original code I posted 

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

Upvotes: 0

Views: 2403

Answers (1)

tchow002
tchow002

Reputation: 1098

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

So if you wanted to set the css property for border for your checkbox's parent div you could do:

To add the border: checkbox.parent().css("border","1px solid red")

To remove the border: 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.

And .removeClass to remove it

Upvotes: 1

Related Questions