Member Avatar for 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);
                }
            });
Edited by PsychicTide
  • 3 Contributors
  • 4 Replies
  • 242 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PsychicTide

Recommended Answers

All 4 Replies

Member Avatar for 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

commented: I get your logic now, didn't make sense until pritaeas spelled out what you were saying in a different way. thanks for the response! +5
Member Avatar for 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).

Edited by PsychicTide
Member Avatar for 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);
        }
});
commented: thanks for the awesome idea, very simple and light weight! +5
Member Avatar for PsychicTide

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

Edited by PsychicTide
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.