Select a Checkbox using jQuery

Question

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

Incidental and not part of the issue, but you've got a rogue </label> tag in your example after the checkbox - The <li>'s containing divs within them is also one to address. — csharpnumpty
– csharpnumpty, Commented Mar 3, 2012 at 17:59
What is this selectProduct is doing actually?.. Any Ajax call? — Abhijeet Pawar
– Abhijeet Pawar, Commented Mar 3, 2012 at 18:01
Abhijeet: JavaScript:selectProduct is a function where I maintain the list 'selectedProductIDs' - no Ajax call. — Walter Lockhart
– Walter Lockhart, Commented Mar 3, 2012 at 18:04
I created this jsFiddle: jsfiddle.net/KFFM5 - does this prove that the core of your jQuery code is fine and potentially that the HTML inaccuracies are to blame? Not entirely sure. Either way, hope it may help.... if selectedProductIds is set correctly then the checkboxes get checked — csharpnumpty
– csharpnumpty, Commented Mar 3, 2012 at 18:06

charlietfl · Accepted Answer · 2012-03-03 18:18:03Z

2

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/

answered Mar 3, 2012 at 18:18

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

danpickett · Accepted Answer · 2012-03-03 18:03:17Z

0

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

checkBox.defaultChecked = true;

answered Mar 3, 2012 at 18:03

danpickett

2,04614 silver badges18 bronze badges

1 Comment

Walter Lockhart Over a year ago

Sorry danpickett I don't understand how I can use this solution in the code snippet I provided above.

Seybsen · Accepted Answer · 2012-03-03 18:14:38Z

0

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.

answered Mar 3, 2012 at 18:14

Seybsen

15.6k4 gold badges45 silver badges76 bronze badges

1 Comment

Walter Lockhart Over a year ago

Thanks Seybsen the function is being called.

Collectives™ on Stack Overflow

Select a Checkbox using jQuery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related