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

jQuery का उपयोग करके चयनित चेकबॉक्स के मान प्राप्त करना


हां, हम jQuery का उपयोग करके चयनित चेकबॉक्स के मान प्राप्त कर सकते हैं इनपुट की अवधारणा का उपयोग करके। हमें :checked सेलेक्टर का भी उपयोग करना होगा।

उदाहरण

कोड निम्न है:

<!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>    <input type="checkbox" name="checkDemo" id="check1" value="Cricket" />    <label for="check1">Cricket</label>    <input type="checkbox" name="checkDemo" id="check2" value="Listening Music" />    <label for="check2">Listening Music</label> <input type="checkbox" name="checkDemo" id="check3" value="Reading NewsPaper" /> <label for="check3">Reading NewsPaper</label> <br> <button type="button">Click Me</button> <script>    $(document).ready(function () {       $("button").click(function () {          $('input[name="checkDemo"]:checked').each(function () {             console.log(this.value);          });       });    }); </script> </html>

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

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

jQuery का उपयोग करके चयनित चेकबॉक्स के मान प्राप्त करना

अब, चेकबॉक्स चुनें:

jQuery का उपयोग करके चयनित चेकबॉक्स के मान प्राप्त करना

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

jQuery का उपयोग करके चयनित चेकबॉक्स के मान प्राप्त करना


  1. HTML में मंथ इनपुट टाइप का उपयोग कैसे करें? HTML में मंथ इनपुट टाइप का उपयोग कैसे करें?

    HTML में मंथ इनपुट टाइप <input type="month"> का उपयोग करके किया जाता है। इसका उपयोग करके, उपयोगकर्ताओं को महीना और वर्ष चुनने की अनुमति दें। मंथ इनपुट टाइप पर उपयोगकर्ता इनपुट देने पर एक डेट पिकर पॉपअप दिखाई देता है।नोट: इनपुट टाइप मंथ Firefox और Internet Explorer पर समर्थित नहीं है।

  1. HTML में रेंज इनपुट टाइप का उपयोग कैसे करें? HTML में रेंज इनपुट टाइप का उपयोग कैसे करें?

    <input type="range"> मानों की एक श्रेणी जोड़ने के लिए उपयोग किया जाता है। आप संख्याओं के लिए श्रेणी पर प्रतिबंध भी सेट कर सकते हैं। प्रतिबंधों के लिए, min, max और step एट्रिब्यूट्स का उपयोग करें। डिफ़ॉल्ट श्रेणी 0 से 100 तक होती है।उदाहरणHTML में रेंज इनपुट टाइप का उपयोग करने का तरीक

  1. HTML में ऑटोकंप्लीट एट्रिब्यूट का उपयोग कैसे करें? HTML में ऑटोकंप्लीट एट्रिब्यूट का उपयोग कैसे करें?

    autocomplete एट्रिब्यूट का उपयोग फॉर्म एलिमेंट के साथ ऑटोकंप्लीशन सुविधा को चालू या बंद करने के लिए किया जाता है। यदि ऑटोकंप्लीशन सुविधा on है, तो ब्राउज़र उपयोगकर्ता द्वारा पहले फ़ील्ड में दर्ज किए गए मानों के आधार पर स्वचालित रूप से मान दिखाएगा।यदि autocomplete सुविधा off है, तो ब्राउज़र उपयोगकर्त