Allow multiple CheckBox selection based on HTML TextArea element in jQuery

letstry
 
on Feb 06, 2022 09:53 PM
792 Views

Select CheckBox based on HTML TextArea value in jQuery

Almost good. It's allow for single choice i need multiple choices.

Good example:

  • Car
  • Bus
  • 4

Then checkbox is ON.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 07, 2022 06:04 AM

Hi letstry,

Refer below code.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="checkboxes">
        <textarea id="txtType" name="type" rows="5" cols="35"></textarea>
        <br />
        <input type="checkbox" value="Car" /><label>Car</label>
        <input type="checkbox" value="Bus" /><label>Bus</label>
        <input type="checkbox" value="3" /><label>3</label>
        <input type="checkbox" value="4" /><label>4</label>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#txtType').on('keyup', function () {
                $('#checkboxes').find('input[type=checkbox]').each(function () {
                    $(this).removeAttr('checked');
                });

                var types = $(this).val().split('\n');
                $(types).each(function () {
                    $('#checkboxes').find('input[value="' + $(this)[0] + '"]').attr('checked', 'checked');
                });
            });
        });
    </script>
</body>
</html>

Demo