Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript में सरणी का उपयोग करके रेडियो बटन डायनामिकली बनाना


सरणी का उपयोग करके डायनामिकली रेडियो बटन बनाने के लिए, createElement() और appendChild() की अवधारणा का उपयोग करें।

उदाहरण

कोड निम्न है:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> </body> <script>    var gender = ['Male', 'Female'];    gender.forEach((genederValue, i) => {       var labelValue = document.createElement('label');       labelValue.innerHTML = genederValue;       var inputValue = document.createElement('input');       inputValue.type = "radio";       inputValue.name = genederValue;       inputValue.genederValue = i;       document.body.appendChild(labelValue);       document.body.appendChild(inputValue);    }); </script> </html>

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html(index.html) सहेजें और फ़ाइल पर राइट-क्लिक करें। VS कोड एडिटर में "Open with live server" विकल्प चुनें।

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में सरणी का उपयोग करके रेडियो बटन डायनामिकली बनाना


  1. जावास्क्रिप्ट का उपयोग करके कुकी कैसे पढ़ें? जावास्क्रिप्ट का उपयोग करके कुकी कैसे पढ़ें?

    जावास्क्रिप्ट का उपयोग करके कुकी पढ़ने के लिए कोड निम्नलिखित है: नोट - इस उदाहरण को चलाने के लिए एक लोकल सर्वर की आवश्यकता होगी। उदाहरण <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <

  1. JavaScript का उपयोग करके URL ऑब्जेक्ट कैसे बनाएं? JavaScript का उपयोग करके URL ऑब्जेक्ट कैसे बनाएं?

    JavaScript का उपयोग करके URL ऑब्जेक्ट बनाने का निम्नलिखित कोड है:उदाहरण<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>URL Obje

  1. JavaScript फाइल को डायनामिकली कैसे लोड करें? JavaScript फाइल को डायनामिकली कैसे लोड करें?

    JavaScript फाइल को डायनामिकली लोड करने का निम्नलिखिक कोड है:उदाहरण<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dynamic JS Lo