CODEWITHSUNDEEP
jquerycheckbox
Walter Lockhart
Walter Lockhart

Reputation: 1293

Select a Checkbox using jQuery

I have developed a product catalogue front-end using ASP.NET, jQuery, JSON and jTemplates.

Basically, the front-end retrieves a paged set of products from the database using jQuery and JSON and displays the products on the front-end (one page at a time) using the jTemplate 'productItemTemplate' see below.

Here is a snippet of my code:

<script type="text/javascript">

var selectedProductIDs = '1, 2';

    function displayProductCheckboxes() {
        var productIDs = selectedProductIDs.split(", ");
        var checkboxes = $('input:checkbox[name="chkProduct"]');

        for (var j = 0; j < productIDs.length; j++) {
            checkboxes
            .filter('[id="' + productIDs[j] + '"]')
            .attr('checked', 'checked');
        };
    }


    <script type="text/html" id="productItemTemplate">    
        <ul class="items-list">        
        {#foreach $T.items as record}                                       
            <li class="item-detail">

              <a class="item-productimage-link" href="<%=Page.ResolveUrl("~/Product/Detail.aspx?ProductID={$T.record.ProductSummaryViewID}") %>">
                <img class="item-productimage" src="<%=Page.ResolveUrl("~/Content/Images/Products/{$T.record.ProductSummaryViewID}.jpg") %>" />
              </a>

              <div class="item-productname">
                <a href="<%=Page.ResolveUrl("~/Product/Detail.aspx?ProductID={$T.record.ProductSummaryViewID}") %>">{$T.record.BrandName} {$T.record.Name}</a>
              </div>

             <div class="item-price">{$T.record.Price}</div>

             <div><input type="checkbox" class="" name="chkProduct" id="{$T.record.ProductSummaryViewID}" onclick="JavaScript:selectProduct({$T.record.ProductSummaryViewID})"/>Select me!</label></div>

           </li>
           {#/for}  
        </ul>                  
    </script>

Each product has a checkbox 'chkProduct' - see above. I would like the user to be able to select a product by clicking the associated checkbox and for the user's selection to be maintained across pages.

To achieve this I maintain a list of selected Product IDs 'selectedProductIDs' - see above.

Everytime I load a page of products I call the function 'displayProductCheckboxes()' which is meant to check the previously checked checkboxes.

Unfortuanetly. it doesn't check the previously checked checkboxes.

Can anyone help me resolve this issue please or suggest an alternative working solution.

Thanks.

Regards

Walter

Upvotes: 1

Views: 429

Answers (3)

charlietfl
charlietfl

Reputation: 171669

jQuery introduced the prop() method in version 1.6 as attr() has long been problematic in various situations. Use prop() instead of attr() for properties like "checked". "checked" is an element property not attribute

http://api.jquery.com/prop/

Upvotes: 2

Seybsen
Seybsen

Reputation: 15581

Your example function is working correctly for me in FF 10.0.2 with jQuery 1.7.1. Maybe you are not calling the function displayProductCheckboxes();on $(document).ready()?

I built a small jsfiddle: see it here.

Upvotes: 0

danpickett
danpickett

Reputation: 2046

I've had this problem in IE. I've set the defaultChecked property.

checkBox.defaultChecked = true;

Upvotes: 0

Related Questions