使用jQuery选择一个复选框

时间:2012-03-03 17:55:08

标签: jquery checkbox

我使用ASP.NET,jQuery,JSON和jTemplates开发了产品目录前端。

基本上,前端使用jQuery和JSON从数据库中检索一组分页产品,并使用jTemplate'productItemTemplate'在前端显示产品(一次一页),见下文。

以下是我的代码片段:

<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>

每个产品都有一个复选框'chkProduct' - 见上文。我希望用户能够通过单击相关的复选框来选择产品,并且可以跨页面维护用户的选择。

为实现这一目标,我保留了所选产品ID'selectedProductIDs'的列表 - 见上文。

每次我加载产品页面时,我都会调用函数'displayProductCheckboxes()'来检查之前选中的复选框。

Unfortuanetly。它不会检查以前选中的复选框。

任何人都可以帮我解决这个问题或建议其他工作解决方案。

感谢。

此致

沃尔特

3 个答案:

答案 0 :(得分:2)

jQuery在版本1.6中引入了prop()方法,因为attr()在各种情况下一直存在问题。对于像“checked”这样的属性,使用prop()而不是attr()。 “checked”是元素属性而非属性

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

答案 1 :(得分:0)

我在IE中遇到过这个问题。我已经设置了defaultChecked属性。

checkBox.defaultChecked = true;

答案 2 :(得分:0)

您的示例函数在FF 10.0.2中使用jQuery 1.7.1正常工作。也许你没有在displayProductCheckboxes();上调用$(document).ready()函数?

我建立了一个小jsfiddle:see it here