Javascript DOM CSS change not firing

[PsychicTide]

Hey guys. I'm having a problem with changing the CSS of a div tag. I've done a bit of syntax/semantic research on this, but this situation seems a bit too specific to nail down.

Goal:
I have 4 checkboxes
1st: center text (turn off 4th checkbox if it is checked)
2nd: bordered + centered text (turn off 4th checkbox if it is checked)
3rd: bodered + center text + color background (turn off 4th checkbox if it is checked)
4th: turn off first three checkboxes, center text + border + font size increase

Problem:
The 4th checkbox when checked, succesfully adds a border and text-align, but the font change isn't working
The 1st or 2nd box when checked, do nothing (using the exact same code the 4th box uses)
the 3rd box when checked, succesfully adds the background color change, but the centered and border are not showing up

...so it seems the first 3 boxes wont add centered text or border, but the 4th one will (using the same code). I'm hoping this is a simple fix, but I know how DOM elements can sometimes go when you have several calls

code I think masy be the cause:

...
for (var j in checkboxes)
{
    if (checkboxes[j].checked == true)
    {
        if (j==0)
        {
            sumTotal += parseFloat($('#check1').val());
            box1 = 1;
        }
        else
        {
            box1 = 0;
        }
        if (j==1)
        {
            sumTotal += parseFloat($('#check2').val());
            box2 = 1;
        }
        else
        {
            box2 = 0;
        }
        if (j==2)
        {
            sumTotal += parseFloat($('#check3').val());
            box3 = 1;
        }
        else
        {
            box3 = 0;
        }
    }
}
...
if (box1 > 0)
{
    $('#previewOutput').css('text-align', 'center');
    sumTotal -= parseFloat($('#check1').val());
    $('#devCheckBox1').val('1');
}
else
{
    $('#devCheckBox1').val('0');
    $('#previewOutput').css('text-align', 'left');
}
if (box2 > 0)
{
    $('#devCheckBox2').val('1');
    $('#previewOutput').css('text-align', 'center');
    $('#previewOutput').css('border', '2px black solid');
    sumTotal -= parseFloat($('#check2').val());
}
else
{
    $('#devCheckBox2').val('0');
    $('#previewOutput').css('border', 'none');
    $('#previewOutput').css('text-align', 'left');
}
if (box3 > 0)
{
    $('#devCheckBox3').val('1');
    $('#previewOutput').css('text-align', 'center');
    $('#previewOutput').css('border', '2px black solid');
    $('#previewOutput').css('background-color', '#d2d3d5');
    sumTotal -= parseFloat($('#check3').val());
}
else
{
    $('#devCheckBox3').val('0');
    $('#previewOutput').css('background-color', 'white');
    $('#previewOutput').css('border', 'none');
    $('#previewOutput').css('text-align', 'left');
}
if (box4 > 0)
{
    $('#devCheckBox4').val('1');
    $('#previewOutput').find('*').css('font-size','17px');
    $('#previewOutput').find('*').css('font-weight','bold');
    $('#previewOutput').css('text-align', 'center');
    $('#previewOutput').css('border', '2px black solid');
}
else
{
    $('#devCheckBox4').val('0');
    $('#previewOutput').find('*').css('font-size','13px');
    $('#previewOutput').find('*').css('font-weight','normal');
    $('#previewOutput').css('text-align', 'left');
    $('#previewOutput').css('border', 'none');
}
...

Any ideas are much appreciated...

[LastMitch]

I'm having a problem with changing the CSS of a div tag

You know you can separate the CSS and put it in the separate file?

What happend if you didn't add the CSS does it work?

If it does works then it's the CSS issue but it doesn't work then it's code issue.

When you start using borders it's tricky.

You didn't set length how long you want the boxes.

Beside that I don't see any issue with your CSS anymore.

[Airshow]

You will find the code is much easier to write against a rephrased goal.

Goal:
I have 4 radio buttons, which determine the style applied to a DOM element.
1st: style 1
2nd: style 2
3rd: style 3
4th: style 4

By giving the radio buttons the same name, they will be mutually exclusive (ie a maximum of one will be checked).

By giving each radio button a value equivalent to a CSS class, you will have the means of directly applying the demanded style when the user clicks on one of these buttons.

If it's necessary to clear the styles such that no style (or a default style) is is applied, then you need a fifth radio button in the same group.

jQuery makes the coding trivial - possibly 3 or 4 lines - though you will need some 20-25 lines in your style sheet.

[PsychicTide]

Thanks for the quick response guys. This is another classic case of me just trying to over-complicate the situation. I ended up adding CSS the the main file and adding/removing CSS classes via javascript and checkbox status.

I knew daniweb would help me make it clear, thanks for the help guys! :)