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

Check checkbox groups from existing items in a textarea dynamically

本文关键字：项目 复选框 中文 文本 区域 动态      更新时间：2023-09-26

你能看看这个例子，告诉我如何使用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 />

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/

Fiddle

function checkTheBoxes() {
    var $checkboxes = $('input[type="checkbox"]'),
        $textarea = $('textarea'),
        items = $textarea.val().split(', '),
        final_arr = [];
    for (var i = 0, max = items.length; i < max; i += 1) {
        final_arr.push(items[i].replace(' ', ''));
    }
    $checkboxes.each(function (k, v) {
        if ($.inArray($(v).val(), final_arr) != -1) {
            $(v).prop('checked', true);
        } else {
            $(v).prop('checked', false);
        }
    });
}
checkTheBoxes();
<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 />

相关文章：