Sunday, August 19, 2012

Get Checkbox values comma separated using jquery

<div id="c_b">
<div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="swimmingpool" id="swimmingpool" value="1"></div>
                                    <div class="peroperty_text">Swimming Pool</div>
                                    </div>
                                      <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="fitnesscenter" id="fitnesscenter" value="2"></div>
                                    <div class="peroperty_text">fitness center</div>
                                    </div>
                                      <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="restaurant" id="restaurant" value="3"></div>
                                    <div class="peroperty_text">restaurant</div>
                                    </div>
                                      <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="childrenactivities" id="childrenactivities" value="4"></div>
                                    <div class="peroperty_text">children’s activities</div>
                                    </div>
                                    
                                     <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="complimentarybreakfast " id="complimentarybreakfast " value="5"></div>
                                    <div class="peroperty_text">complimentary breakfast </div>
                                    </div>
                                    
                                     <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="meetingfacilities" id="meetingfacilities" value="6"></div>
                                    <div class="peroperty_text">meeting facilities</div>
                                    </div>
                                    
                                    
                                    <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="petsallowed " id="petsallowed " value="7"></div>
                                    <div class="peroperty_text">pets allowed </div>
                                    </div>
                                    
                                     <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="wheelchair" id="wheelchair" value="8"></div>
                                    <div class="peroperty_text">wheelchair accessible</div>
                                    </div>
                                    
                                    <div class="checktextrow">
                                    <div class="peroperty_checks"><input type="checkbox" name="kitchen" id="kitchen" value="9"></div>
                                    <div class="peroperty_text">kitchen/kitchenette</div>
                                    </div>
</div>

 <textarea id="t"></textarea>



Here is jquery code for access all checkbox using jquery and set the checkboxes values in textarea.



 function updateTextArea() {
         
         var allVals = [];
         $('#c_b :checked').each(function() {
           allVals.push($(this).val());
         });
         $('#t').val(allVals)
      }
     $(function() {
       $('#c_b input').click(updateTextArea);
         updateTextArea();
     });



complete  working example can be check here 



1 comment:

  1. Good article.I really think what you said is right,in modern society,we have so many troubles,if you feel nothing to relax yourself,I suggest you to play the wow and some other games,and you can come to my page to find more information about http://www.mmolive.com/ and http://www.mmohome.com/gold/Guild-Wars-2-US.html/

    ReplyDelete