在Textarea中显示选中的复选框

时间：2017-12-06 12:24:33

标签： javascript jquery html

用户希望选择最多5个复选框，并且值应显示在textarea中。验证工作正常，价值来到textarea。但是，当我点击超过5个复选框时，第六个值将来到textarea。请检查以下代码并帮我修复。

如果我选择四个或五个复选框，那么这些值应该显示在textarea中。目前它显示的不仅仅是选中的。

＆＃13;
＆＃13; 
$(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');
        }
    })
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

从programming中的0开始计数，因此您需要使用< 5。

＆＃13;
＆＃13; 
$(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');
        }
    })
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

像这样更改if条件

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

因为当你点击它时，它会被检查，然后检查if条件。因此，在第6个检查并添加到textarea之前，我们需要停止它。

相关问题
最新问题