Select (Check) CheckBox based on HTML TextArea value in jQuery

letstry
 
on Feb 05, 2022 06:07 AM
2164 Views

Hi!

If I write the word car in the textarea, then checkbox is ON.

Remove car then checkbox is empty.

Is possible?

Paste must also work like Car Bus

<body>
    <form>
    <textarea name="type" rows="5" cols="35"></textarea><br>
    <input type="checkbox" value="Car"><label>Car</label><br>
    <input type="checkbox" value="Bus"><label>Bus</label><br>
    <input type="checkbox" value="3"><label>3</label><br>
    <input type="checkbox" value="4"><label>4</label>
    </form>
</body>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
RahulYadav
 
on Feb 05, 2022 07:07 AM

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>
        <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');
                });
                $('#checkboxes').find('input[value="' + $(this).val() + '"]').attr('checked', 'checked');
            });
        });
    </script>
</body>
</html>

Demo