anjanesh/get-selected-radio-input-value.html

## get-selected-radio-input-value.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Cache-control" content="no-cache">
    <title>JavaScript: Get selected radio input's value</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="flex gap-4 mb-5">
        <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
            <input type="radio" id="type-fruit" name="type-food" value="fruit" class="form-radio text-blue-600" />
            <span class="text-gray-700">Fruit</span>
        </label>
        <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
            <input type="radio" id="type-vegetable" name="type-food" value="vegetable" class="form-radio text-blue-600" />
            <span class="text-gray-700">Vegetable</span>
        </label>
    </div>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="foo()">
        Which type of food?
    </button>
    <script>
    const foo = () =>
    {
        const foodType = document.querySelector('input[name="type-food"]:checked').value;
        alert(foodType); console.log(foodType);
    }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="Cache-control" content="no-cache">
	<title>JavaScript: Get selected radio input's value</title>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body>
	<div class="flex gap-4 mb-5">
	<label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
	<input type="radio" id="type-fruit" name="type-food" value="fruit" class="form-radio text-blue-600" />
	<span class="text-gray-700">Fruit</span>
	</label>
	<label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
	<input type="radio" id="type-vegetable" name="type-food" value="vegetable" class="form-radio text-blue-600" />
	<span class="text-gray-700">Vegetable</span>
	</label>
	</div>
	<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="foo()">
	Which type of food?
	</button>
	<script>
	const foo = () =>
	{
	const foodType = document.querySelector('input[name="type-food"]:checked').value;
	alert(foodType); console.log(foodType);
	}
	</script>
	</body>
	</html>