[RESOLVED]Help with Multiple Checkboxes

Am not vast in the knowledge of JS.. I need help with the below snippet, It does something close to what I want, I want the script to be able to select more than one item [checkbox], and give me the opportunity to deselect a selected item [checkbox].

Thanks

 <div class="row form-group product-chooser">
    
    	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    		<div class="product-chooser-item selected">
    			<img src="http://renswijnmalen.nl/bootstrap/desktop_mobile.png" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="Mobile and Desktop">
                <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
    				<span class="title">Mobile and Desktop</span>
    				<span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>
    				<input type="checkbox" name="product" value="mobile_desktop" checked="checked">
    			</div>
    			<div class="clear"></div>
    		</div>
    	</div>
    	
    	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    		<div class="product-chooser-item">
    			<img src="http://renswijnmalen.nl/bootstrap/desktop.png" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="Desktop">
                <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
    				<span class="title">Desktop</span>
    				<span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>
    				<input type="checkbox" name="product" value="desktop">
    			</div>
    			<div class="clear"></div>
    		</div>
    	</div>
    	
    	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    		<div class="product-chooser-item">
    			<img src="http://renswijnmalen.nl/bootstrap/mobile.png" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="Mobile">
                <div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
    				<span class="title">Mobile</span>
    				<span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span>
    				<input type="checkbox" name="product" value="mobile">
    			</div>
    			<div class="clear"></div>
    		</div>
    	</div>
    	
    </div>
             <script>
    $(function(){
	$('div.product-chooser').find('div.product-chooser-item').on('click', function(){
		$(this).parent().parent().find('div.product-chooser-item').removeClass('selected');
		$(this).addClass('selected');
		$(this).find('input[type="checkbox"]').prop("checked", true);
		
	});
});
     
</script>

Hi hardweezy,

hardweezy

I need help with the below snippet, It does something close to what I want, I want the script to be able to select more than one item [checkbox], and give me the opportunity to deselect a selected item [checkbox].

According to your description, I have tested your codes on my machine. Please try to modify your code as below:

    <script type="text/javascript">
        $(function () {
            $('div.product-chooser').find('div.product-chooser-item').on('click', function () {
                if ($(this).find('input[type="checkbox"]').prop("checked")) {
                    $(this).find('input[type="checkbox"]').prop("checked", false);
                }
                else {
                    $(this).find('input[type="checkbox"]').prop("checked", true);
                }
            });
        });
    </script>

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

Leave a Reply