CODEWITHSUNDEEP
javascriptjqueryhtml
acmsohail
acmsohail

Reputation: 1023

Display selected checkbox in Textarea

Users want to select maximum 5 checkboxes and the values should display in the textarea. Validation is working fine and the values are coming to textarea. But when I click more than 5 checkboxes, sixth value is coming to textarea. Please check the below code and help me to fix.

If I select four or five checkboxes those values should be displayed in the textarea. Currently it display more than selected. 

$(document).ready(function() {
    $('label.chkskillsedit>input[type=checkbox].hid').on('change', function(evt) {
        if ($('label.chkskillsedit>input[type=checkbox]:checked').length <= 5) {
            $(this).parent('label').toggleClass('highlightcheckboxedit', this.checked);

            function fullskilledit() {
                var allValsedit = [];
                $('label.chkskillsedit :checked').each(function() {
                    allValsedit.push($(this).val());
                });
                $('.txtValueshwskilledit').val(allValsedit);
            };
            $(function() {
                $('.chkskillsedit>input.hid').click(fullskilledit);
                fullskilledit();
            });
        } else {
            $(this).prop('checked', false);
            $(this).parent('label').removeClass('highlightcheckboxedit');
        }
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="51" checked>Architect</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="52">Building Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="53">Draftsman</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="54" checked>Interior Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="55">Landscape Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="56">MEP Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="57" checked>Restoration Architect</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="58">Surveyor</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="59">Sustainable Designer</label><br>
    <br>
    <textarea cols="50" class="txtValueshwskilledit" name="skills" value="">51,54,57</textarea>

Upvotes: 1

Views: 932

Answers (3)

Patata
Patata

Reputation: 273

You have to call

$(function() {
   $('.chkskillsedit>input.hid').click(fullskilledit);
   fullskilledit();
  });

Both If and else condition in if ($('label.chkskillsedit>input[type=checkbox]:checked').length <= 5){...}else{....}

Check below

$(document).ready(function() {
    $('label.chkskillsedit>input[type=checkbox].hid').on('change', function(evt) {
        if ($('label.chkskillsedit>input[type=checkbox]:checked').length <= 5) {
          $(this).parent('label').toggleClass('highlightcheckboxedit', this.checked);

            
            $(function() {
                $('.chkskillsedit>input.hid').click(fullskilledit);
                fullskilledit();
            });
        } else {
            $(this).prop('checked', false);
            $(this).parent('label').removeClass('highlightcheckboxedit');
            $(function() {
                $('.chkskillsedit>input.hid').click(fullskilledit);
                fullskilledit();
            });
        }
    })
})
function fullskilledit() {
                var allValsedit = [];
                $('label.chkskillsedit :checked').each(function() {
                    allValsedit.push($(this).val());
                });
                $('.txtValueshwskilledit').val(allValsedit);
            };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="51" checked>Architect</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="52">Building Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="53">Draftsman</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="54" checked>Interior Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="55">Landscape Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="56">MEP Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="57" checked>Restoration Architect</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="58">Surveyor</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="59">Sustainable Designer</label><br>
    <br>
    <textarea cols="50" class="txtValueshwskilledit" name="skills" value="">51,54,57</textarea>

Upvotes: 1

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Change your if condition like this

if ($('label.chkskillsedit>input[type=checkbox]:checked').length <= 4) {

because when you click on it, it gets checked and then it checkes the if condition. So before the 6th one gets checked and added to textarea, we need to stop that.

Upvotes: 0

Zvezdas1989
Zvezdas1989

Reputation: 1465

Counting starts from 0 in programming so you need to use < 5.

$(document).ready(function() {
    $('label.chkskillsedit>input[type=checkbox].hid').on('change', function(evt) {
        if ($('label.chkskillsedit>input[type=checkbox]:checked').length < 5) {
            $(this).parent('label').toggleClass('highlightcheckboxedit', this.checked);

            function fullskilledit() {
                var allValsedit = [];
                $('label.chkskillsedit :checked').each(function() {
                    allValsedit.push($(this).val());
                });
                $('.txtValueshwskilledit').val(allValsedit);
            };
            $(function() {
                $('.chkskillsedit>input.hid').click(fullskilledit);
                fullskilledit();
            });
        } else {
            $(this).prop('checked', false);
            $(this).parent('label').removeClass('highlightcheckboxedit');
        }
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="51" checked>Architect</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="52">Building Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="53">Draftsman</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="54" checked>Interior Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="55">Landscape Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="56">MEP Designer</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color highlightcheckboxedit">
    <input class="hid" name="fr_skills" type="checkbox" value="57" checked>Restoration Architect</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="58">Surveyor</label><br>
<label class="chkskillsedit cursor1 backgroundcolor2-color ">
    <input class="hid" name="fr_skills" type="checkbox" value="59">Sustainable Designer</label><br>
    <br>
    <textarea cols="50" class="txtValueshwskilledit" name="skills" value="">51,54,57</textarea>

Upvotes: 0

Related Questions