如何检查是否选中了复选框并将其图像附加到另一个div

时间:2014-07-01 11:08:35

标签: jquery

我想检查是否检查了.addtocomparelist(此类有很多复选框),获取其值并找到与获取值具有相同ID的元素,然后在其中查找特定图像和文本,并将其附加到另一个div,这是我写的,但它不起作用!

if($('.addtocomparelist').prop('checked')) {
        var x = $(this).val();
        var img = $('#' + x).find('.productimage img');
        var name = $('#' + x).find('.productname').text();
        $('#comparelist').find('ul').append('<li>' + img + name +'</li>');
}

HTML代码:

        <div id="filterResult" class="grid">
        <ul>
            <li class="filteredproducts" id="p1">
                <div class="specialoffertag">
                    <img src="ui/css/img/filterResults/SpecialOffer.png" alt="پیشنهاد ویژه" />
                </div>
                <div class="compareResults">
                    <label class="addtocomparelist">مقایسه
                        <input type="checkbox" name="addtocomparelist" value="p1" class="addtocomparelist" />
                    </label>
                </div>
                <a href="#" title="" class="productimage"><img src="ui/css/img/filterResults/Mobile-Samsung-Galaxy-Note-3-N9000-32GB1064d4.jpg" alt="" /></a>
                <div class="productcolors">
                    <ul>
                        <li class="redproduct">قرمز</li>
                        <li class="blackproduct">مشکی</li>
                        <li class="whiteproduct">سفید</li>
                    <div class="clearfloat"></div></ul>
                </div>
                <div class="productrate">
                    <span class="usersrate"><span>امتیاز کاربران ( از 1044 رای )</span> 7.0</span>
                    <span class="stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-full"></i><i class="fa fa-star-o"></i></span>
                </div>
                <div class="seperation"></div>
                <a class="productname" href="#" title="">Samsung Galaxy Note III</a>
                <a class="productnamefa" href="#" title="">گوشی موبایل سامسونگ گلکسی اس5 - 16 گیگابایت</a>
                <div class="productdesc">
                    <p><span>مشخصات کلی:</span>یک سیم کارته - وزن : 130 گرم - مناسب برای عکاسی</p>
                    <p><span>پردازنده:</span>Exynos 5 Octa 5410 Chipset Quad-Core Cortex-A15 and Quad-Core Cortex-A7 CPU's</p>
                    <p><span>صفحه نمایش:</span>صفحه نمایش رنگی لمسی خازنی از نوع Super AMOLED - سایز صفحه نمایش : 4.99 اینچ - دارای رزولوشن 1920 × 1080 - تراکم پیکسلی : 441 پیکسل بر اینچ - قابلیت نمایش 16 میلیون رنگ</p>
                    <p><span>حافظه:</span>حافظه داخلی 16384 مگابایت - حافظه رم 2048 مگابایت - قابلیت نصب کارت حافظه از نوع Micro SD</p>
                    <p><span>شبکه های ارتباطی:</span>3G - GPRS - قابلیت اتصال به اینترنت از طریق وای فای - GPS - NFC - بلوتوث</p>
                    <p><span>دوربین:</span>13.0 مگاپیکسل - فوکوس اتوماتیک - فلاش - دوربین مکالمه ویدئویی</p>
                    <p><span>صدا:</span>فیش 3.5 میلیمتری هدفون</p>
                    <p><span>امکانات نرم افزاری:</span>سیستم عامل Android 4.2 Jelly Bean - پشتیبانی از جاوا - نمایش فایلهای مایکروسافت آفیس - نمایش فایلهای PDF</p>
                    <p><span>سایر مشخصات:</span>قطب نما - باتری 2600 میلی آمپر ساعتی</p>
                </div>
                <span class="productprice">1,800,000<small>تومان</small></span>
                <a href="#" title=""><img class="addtocart" src="ui/css/img/filterResults/addtocart-min.png" alt="اضافه به سبد خرید" /></a>
                <a href="#" title=""><img class="moredetails" src="ui/css/img/filterResults/productdetail.gif" alt="جزئیات محصول" /></a>
            </li>
            <li class="filteredproducts" id="p2">
                <div class="specialoffertag">
                    <img src="ui/css/img/filterResults/SpecialOffer.png" alt="پیشنهاد ویژه" />
                </div>
                <div class="compareResults">
                    <label class="addtocomparelist">مقایسه
                        <input type="checkbox" name="addtocomparelist" value="p2" class="addtocomparelist" />
                    </label>
                </div>
                <a href="#" title="" class="productimage"><img src="ui/css/img/filterResults/Mobile-Samsung-Galaxy-Note-3-N9000-32GB1064d4.jpg" alt="" /></a>
                <div class="productcolors">
                    <ul>
                        <li class="redproduct">قرمز</li>
                        <li class="blackproduct">مشکی</li>
                        <li class="whiteproduct">سفید</li>
                    <div class="clearfloat"></div></ul>
                </div>
                <div class="productrate">
                    <span class="usersrate"><span>امتیاز کاربران ( از 1044 رای )</span> 7.0</span>
                    <span class="stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-full"></i><i class="fa fa-star-o"></i></span>
                </div>
                <div class="seperation"></div>
                <a class="productname" href="#" title="">Samsung Galaxy Note III</a>
                <a class="productnamefa" href="#" title="">گوشی موبایل سامسونگ گلکسی اس5 - 16 گیگابایت</a>
                <div class="productdesc">
                    <p><span>مشخصات کلی:</span>یک سیم کارته - وزن : 130 گرم - مناسب برای عکاسی</p>
                    <p><span>پردازنده:</span>Exynos 5 Octa 5410 Chipset Quad-Core Cortex-A15 and Quad-Core Cortex-A7 CPU's</p>
                    <p><span>صفحه نمایش:</span>صفحه نمایش رنگی لمسی خازنی از نوع Super AMOLED - سایز صفحه نمایش : 4.99 اینچ - دارای رزولوشن 1920 × 1080 - تراکم پیکسلی : 441 پیکسل بر اینچ - قابلیت نمایش 16 میلیون رنگ</p>
                    <p><span>حافظه:</span>حافظه داخلی 16384 مگابایت - حافظه رم 2048 مگابایت - قابلیت نصب کارت حافظه از نوع Micro SD</p>
                    <p><span>شبکه های ارتباطی:</span>3G - GPRS - قابلیت اتصال به اینترنت از طریق وای فای - GPS - NFC - بلوتوث</p>
                    <p><span>دوربین:</span>13.0 مگاپیکسل - فوکوس اتوماتیک - فلاش - دوربین مکالمه ویدئویی</p>
                    <p><span>صدا:</span>فیش 3.5 میلیمتری هدفون</p>
                    <p><span>امکانات نرم افزاری:</span>سیستم عامل Android 4.2 Jelly Bean - پشتیبانی از جاوا - نمایش فایلهای مایکروسافت آفیس - نمایش فایلهای PDF</p>
                    <p><span>سایر مشخصات:</span>قطب نما - باتری 2600 میلی آمپر ساعتی</p>
                </div>
                <span class="productprice">1,800,000<small>تومان</small></span>
                <a href="#" title=""><img class="addtocart" src="ui/css/img/filterResults/addtocart-min.png" alt="اضافه به سبد خرید" /></a>
                <a href="#" title=""><img class="moredetails" src="ui/css/img/filterResults/productdetail.gif" alt="جزئیات محصول" /></a>
            </li>
        </ul>
     </div>

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/qEZ6y/2/

$('input[type="checkbox"]').change(function(){
    if($(this).is(':checked')){
        var id = $(this).val();
        var text = $('#' + id).text();
        var imgSrc = $('#' + id + ' img').attr('src');
        alert(text + ' ' + imgSrc);
    }
});

希望这有帮助!