<!-- See http:kinghorsemedia.ca/bna/ Click on Trailer Configurator, pick a model and click on Accessories
This is html that is loaded when tab_3 is clicked -->

    <div id="tab_3">
        <h3><?php htmlout($model_name); ?> – Accessories</h3>
            <h4>Select Optional Accessories by clicking the boxes. </h4>
            <p>Click on underlined text to view image.</p>
            <form enctype="multipart/form-data" id="acc_form" action="null" method="post">
                <?php
                $acc_type = '';
                foreach ($accessories as $accessory): ?>    
                    <div>
                        <?php
                        if ($acc_type != $accessory['type']) 
                        { 
                            if ($acc_type != '')
                            { ?>
                                <br/><h5><?php htmlout(substr($accessory['type'], 2)); ?></h5>
                            <?php
                            }else{ ?>
                                <h5><?php htmlout(substr($accessory['type'], 2)); ?></h5>
                            <?php
                            }
                            $acc_type = $accessory['type'];
                        } 
                        if ($empty_selected_acc)
                        { ?>
                        <input type="checkbox" name="cfg_accessories[]" onclick="checkClick" 
                          id="accessory<?php htmlout($accessory['id']); ?>"
                          value="<?php htmlout($accessory['id']); ?>" class="<?php htmlout($accessory['chassis']);?>"
                          <?php
                          // if accessory id is saved in Session variable selected_acc, indicate checked
                          if ($accessory['selected'])
                          {
                            echo ' checked="checked"';
                          }
                          ?>>
                         <?php
                        } else
                        { ?>
                        <input type="checkbox" name="cfg_accessories[]" onclick="checkClick"
                          id="accessory<?php htmlout($accessory['id']); ?>"
                          value="<?php htmlout($accessory['id']); ?>" class="<?php htmlout($accessory['chassis']);?>"
                          <?php
                          // if accessory id is saved in Session variable selected_acc, indicate checked
                          if ($accessory['selected'] || in_array($accessory['id'], $selected_acc))
                          {
                            echo ' checked="checked"';
                          }
                          ?>>
                        <?php
                        } ?>
                        <label for="accessory<?php htmlout($accessory['id']);?>">
                            <?php
                            if ($accessory['acc_photo'] != '')
                            { ?>
                              <a target="_blank" rel="<?php htmlout($accessory['type']); ?>" href="../img/accessories/<?php print $accessory['acc_photo'] ?>" title="<?php htmlout($accessory['description']); ?>" ><?php htmlout($accessory['description']); ?></a>
                            <?php
                            }else{
                              htmlout($accessory['description']);
                            } ?>
                        </label>
                    </div>
                <?php endforeach; ?>
                <input type="hidden" value="<?php htmlout($model_id); ?>" id="model_id" name="model_id"/>
            </fieldset>
        </form> 
        <ul class="model_desc"> 
            <li><input class="accessories_back button" type="submit" value="« Back" /></li>
            <li><input class="save_accessories button" type="submit" name="action" value="Next »" /></li>
        </ul>
    </div>

 $(document).on('change', ':checkbox[name="cfg_accessories[]"]', (function(e) {
 //Each checkbox click invokes save_accessories.php to store aray of selected accessories
    var data = [];
    var session_id = $('#session_id').val();
    var not_empty = false;
    if ($('input[type=checkbox]').is(':checked'))
    {
        not_empty = true;
        data = $(":checkbox:checked").map(function(i,n) {
                return $(n).val();
            }).get();
                $.post('save_accessories.php', {'sid': session_id, 'saved_accessories[]': data, 'not_empty': not_empty })
    }
    else
    // All checkboxes are de-selected, so empty the SESSION['selected_acc'] array
    {
        $.post('save_accessories.php', {'sid': session_id, 'saved_accessories[]': data, 'not_empty': not_empty });
    }
    e.preventDefault(); 
  }) ) 


<?php    
//This save_accessories.php
include_once $_SERVER['DOCUMENT_ROOT'] . '/includes/bna/helpers.inc.php';
session_start();
session_id($_POST['sid']);

if (!isset($_SESSION['selected_acc']))
{
    $_SESSION['selected_acc'] = array();
}
//Empty selected_acc Session variable
unset($_SESSION['selected_acc']);
$_SESSION['selected_acc'] = array();
$selected_acc = array();
$not_empty = $_POST['not_empty'];

// saved_parts is generated in configurator.js
if ($not_empty)
{
    foreach ($_POST['saved_accessories'] as $value)
    {
//      $_SESSION['selected_acc'][] = $value;
        $selected_acc[] = $value;
    }
    $_SESSION['selected_acc'] = $selected_acc;
}
else
{
    $_SESSION['selected_acc'] = '';
}
//var_dump($selected_acc);
?>

The link is not working, please verify it.

Sorry - typo. It's kickinghorsemedia.ca/bna/

I implemented a soloution, but IE7 and IE8 indicate scripting errors, so the user needs to disable rx the messages, which is not very good.

I found info on a few forums, but no one had a single soloution that worked 100%. The IE8 debugger is basically useless. The displayed error code is useless as it doesn't indicate which code is unacceptable. What I added is below (commented code I tried is included):

<script type="text/javascript">
    $(document).ready(function(){           
        /*<![CDATA[*/                            
        if ($.browser.msie && (parseInt($.browser.version, 10) === 8 || parseInt($.browser.version, 10) === 7)) {  
            $('#tab_3 input[type=checkbox]').click(function () {
                $(this).trigger("change");
            });

// $('input[type=radio], input[type=checkbox]').click(function() {
$('input[type=checkbox]').click(function() {
// alert('load_tab_3 checkbox clicked');
if ($(this).is('checked')) {
// None of the commented code works in IE8
// $( this ).removeAttr('checked');
// $( this ).attr( 'checked', false );
// this.setAttribute("checked", "checked");

                    // Following works but gives scripting error
                    this.removeAttr('checked');

// this.checked = false;
}
else {
// $( this ).attr( 'checked', 'checked' );
// $( this ).attr( 'checked', true );
// this.setAttribute("checked", "");

                    // Following works but gives scripting error
                    this.attr('checked', 'checked');

// this.checked = true;
}
// this.blur();
// this.focus();
});
/]]>/
}
});
</script>

I just tested and the checkboxes seems ok, but IE JS Debugger throws a few exceptions that you should look into.

IE8 doesn't like either of the following, but each actually works (the check boxes are checked, but with scripting errors)
this.attr('checked', 'checked');
this.attr('checked', true);

The following alternatives simply do not work:
this.setAttribute("checked", "checked");
this.checked = true;

Try this.checked = "checked";

I tried this.checked = "checked";, but if I remove this.removeAttr('checked'); the checkbox is not unchecked and I get a scripting error if I leave it in. I had to add window.onerror = function(){return true;} as a work-around.

Instead of using removeAttr, try using this.checked = ""

Here is the script I'm usuing now. As soon as I remove removeAttr, the checkboxes are not updated. It's as if the js error itself triggers the updates. I would have thought $(this).trigger("change"); would trigger an update.

    <script type="text/javascript">
        $(document).ready(function(){           
            /*<![CDATA[*/                            
            if ($.browser.msie && (parseInt($.browser.version, 10) === 8 || parseInt($.browser.version, 10) === 7)) {  
                window.onerror = function(){return true;}
                $('#tab_3 input[type=checkbox]').on('click',function () {
                    $(this).trigger("change");
                    var checkbox_checked =  $(':checkbox[id=' + $(this).attr("id") + ']').is(':checked');
//                  var checkbox_id = $(this).attr("id");           
//                  alert ('checkbox_id = ' + checkbox_id  + ', checkbox_checked = ' + checkbox_checked);
                  if (checkbox_checked == true) {
                        // Following works but gives scripting error
                        this.removeAttr('checked');
                        this.setAttribute("checked","checked");
                        this.checked = "checked";
                    }
                    if (checkbox_checked == false) {
                        // Following works but gives scripting error
                        this.removeAttr('checked');
                        this.setAttribute("checked", "");
                        this.checked = "";
                    }
              }); 
            /*]]>*/ 
            }  
            $(".video").colorbox({iframe:true, innerWidth:640, innerHeight:480});
            $("a[rel='1_chassis']").colorbox({
              current: "{current} of {total}"
            }); 
            $("a[rel='2_body']").colorbox({
              current: "{current} of {total}"
            }); 
            $("a[rel='3_interior']").colorbox({
              current: "{current} of {total}"
            }); 
        });
    </script>
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.