javascript - 动态检查文本区域中现有项目的复选框组

Question

您能看一下this sample吗？让我知道如何使用 jQuery 动态检查文本区域中具有相同文本的复选框？

    <br />
<br />
Default Items From Database
<br />
<br />
<textarea rows="2" cols="100">mItem 2, vItem 2, vItem 3, chItem 3 </textarea>
<br />
<br />
<fieldset>
    <legend>Meat</legend>
    <input type="checkbox" name="meat" value="mItem1" />mItem 1<br />
    <input type="checkbox" name="meat" value="mItem2" />mItem 2<br />
    <input type="checkbox" name="meat" value="mItem3" />mItem 3
    <br />
    <br />
</fieldset>
    <br />
<fieldset>
    <legend>Veggie</legend>
    <input type="checkbox" name="veggie" value="vItem1" />vItem 1<br />
    <input type="checkbox" name="veggie" value="vItem2" />vItem 2<br />
    <input type="checkbox" name="veggie" value="vItem3" />vItem 3
    <br />
    <br />
</fieldset>
    <br />
<fieldset>
    <legend>Cheese</legend>
    <input type="checkbox" name="cheese" value="chItem1" />chItem 1<br />
    <input type="checkbox" name="cheese" value="chItem2" />chItem 2<br />
    <input type="checkbox" name="cheese" value="chItem3" />chItem 3
    <br />
</fieldset>
    <br />
    <br />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br />
<br />
Default Items From Database
<br />
<br />
<textarea rows="2" cols="100">mItem 2, vItem 2, vItem 3, chItem 3 </textarea>
<br />
<br />
<fieldset>
    <legend>Meat</legend>
    <input type="checkbox" name="meat" value="mItem1" />mItem 1<br />
    <input type="checkbox" name="meat" value="mItem2" />mItem 2<br />
    <input type="checkbox" name="meat" value="mItem3" />mItem 3
    <br />
    <br />
</fieldset>
    <br />
<fieldset>
    <legend>Veggie</legend>
    <input type="checkbox" name="veggie" value="vItem1" />vItem 1<br />
    <input type="checkbox" name="veggie" value="vItem2" />vItem 2<br />
    <input type="checkbox" name="veggie" value="vItem3" />vItem 3
    <br />
    <br />
</fieldset>
    <br />
<fieldset>
    <legend>Cheese</legend>
    <input type="checkbox" name="cheese" value="chItem1" />chItem 1<br />
    <input type="checkbox" name="cheese" value="chItem2" />chItem 2<br />
    <input type="checkbox" name="cheese" value="chItem3" />chItem 3
    <br />
</fieldset>
    <br />
    <br />

Answer 1

defaults=$('textarea').val().split(', ');



$( "input[type='checkbox']" ).each(function( index ) {
for(i=0;i<defaults.length;i++) {    

    if($(this).attr('value')==defaults[i].trim().replace(' ','')) {
        $(this).prop('checked', true);
    }

}
});

演示:https://jsfiddle.net/rjydcror/1/