javascript - 在 Textarea 中显示选中的复选框

Question

用户想要选择最多 5 个复选框，并且值应显示在文本区域中。验证工作正常，值进入 textarea。但是当我点击超过 5 个复选框时，第六个值将出现在 textarea 中。请检查以下代码并帮助我修复。

如果我选择了四个或五个复选框，那么这些值应该显示在文本区域中。目前它显示的比选择的多。

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

Answer 1

你必须打电话

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

if ($('label.chkskillsedit>input[type=checkbox]:checked').length <= 5){...}else{....} 中的 If 和 else 条件

检查下面

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