jQuery DOM selection

[PsychicTide]

Hey guys, been a while since I've been here, but still the best source for help. Hoping you guys can help me with a checkbox/radio button scenario.

HTML...

<div style='margin-bottom:5px;'>
<div style='float:left;width:49%;text-align:left;'><input class='toppingChecked' type='checkbox' id='top-".$row['id']."' value='".$row['topping']."' /> ".$row['topping']."</div>
<div style='float:left;width:7%' class='lblLeft'>
    <input type='radio' class='css-checkboxLeft countToppingSelect' name='top-".$row['id']."' id='top-left-".$row['id']."' value='Cheese' />
    <label for='top-left-".$row['id']."' class='lblLeft'>
        <img src='img/layout/halfCirleLeft.png' width='16' height='16' alt='' />
        <img src='img/layout/halfCirleLeftON.png' width='16' height='16' alt='' />
    </label>
</div>
<div style='float:left;width:7%' class='lblCenter'>
    <input type='radio' class='css-checkboxAll countToppingSelect' name='top-".$row['id']."' id='top-all-".$row['id']."' value='Cheese' />
    <label for='top-all-".$row['id']."' class='lblCenter'>
        <img src='img/layout/fullCircle.png' width='16' height='16' alt='' />
        <img src='img/layout/fullCircleON.png' width='16' height='16' alt='' />
    </label>
</div>
<div style='float:left;width:7%' class='lblRight'>
    <input type='radio' class='css-checkboxRight countToppingSelect' name='top-".$row['id']."' id='top-right-".$row['id']."' value='Cheese' />
    <label for='top-right-".$row['id']."' class='lblRight'>
        <img src='img/layout/halfCirleRight.png' width='16' height='16' alt='' />
        <img src='img/layout/halfCirleRightON.png' width='16' height='16' alt='' />
    </label>
</div>
</div>

CSS...

/* Hiding radio button */
.css-checkboxLeft {display:none;}
/* Hiding second image in label tags */
.lblLeft > img:nth-child(2) {display:none;}
/* When radio-button is checked, display second image in the following label tag */
input[type='radio']:checked + .lblLeft > img:nth-child(1) {display:none;}
input[type='radio']:checked + .lblLeft > img:nth-child(2) {display:inline-block;}

/* Hiding radio button */
.css-checkboxAll {display:none;}
/* Hiding second image in label tags */
.lblCenter > img:nth-child(2) {display:none;}
/* When radio-button is checked, display second image in the following label tag */
input[type='radio']:checked + .lblCenter > img:nth-child(1) {display:none;}
input[type='radio']:checked + .lblCenter > img:nth-child(2) {display:inline-block;}

/* Hiding radio button */
.css-checkboxRight {display:none;}
/* Hiding second image in label tags */
.lblRight > img:nth-child(2) {display:none;}
/* When radio-button is checked, display second image in the following label tag */
input[type='radio']:checked + .lblRight > img:nth-child(1) {display:none;}
input[type='radio']:checked + .lblRight > img:nth-child(2) {display:inline-block;}

the idea is to click the checkbox, which will automatically select the center radio button (toppings on all of pizza), and secondly (vice-versa) (if left, right, or center is selected, the checkbox corresponding is as well) (think dominos).

The idea was some sort of combination of these jQuery functions for the first scenario, but I haven't found the correct combo yet, any ideas?

jQuery...

$('.toppingChecked').change(function(){
                if (this.checked)
                {
                    $(this).parent().next().eq(1).find("input").prop("checked", true);
                }
            });

[jstfsklh211]

your code shows one checkbox and 3 radios
a little unclear about what the desired result is

check your field naming you have some duplicates which is not allowed

also name your boxes better ie for a center box radio or check use 'center' in your name that combined with the row id should make selecting boxes simple

change fun() {
radio = this.name.replace (checkbox,radiobox)
radio.checked = true
}

you'll need to edit my pseudo code as it will fail

[PsychicTide]

Thanks for the response jstfsklh211,

Not sure I follow your logic on this one, this.name.replace? (can you explain what this is doing?). The names are duplicates, yes, but I'm not working with names, I'm working with IDs and Classes and the W3C validation will be done later. the ultimate goal is...

If checkbox is checked, also check the middle radio button... and eventually after that is fixed, if any radio button is checked, also check the checkbox correlating to those radios. Dominos has it setup so if you check a topping checkbox, 3 radio buttons (images) pop up with the center one (full topping portion) already selected...
toppingName - CHKBX | leftHalfRadio | fullToppingRadio | rightHalfRadio

I'm trying to build this in such a way that the number of and values of each checkbox/radio button combo is generated dynamically based on the number of toppings, hence the ambiguity on the .change function (this.familyStructure next to this).

[pritaeas]

Your checkbox id is top-1 and the associated radiobutton id is top-all-1. Wouldn't a simple replace be simpler:

$('.toppingChecked').change(function() {
        if (this.checked) {
                var id = $(this).prop('id').replace('top-', 'top-all-');
                $(id).prop("checked", true);
        }
});

[PsychicTide]

Excellent idea pritaeas, was exactly what I needed! Thank you!