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

Question 1

मैं चेकबॉक्सग्रुप 'लोकटम्स' के माध्यम से लूप करना चाहता हूं और सभी चयनित मानों के साथ एक स्ट्रिंग का निर्माण करना चाहता हूं। इसलिए जब चेकबॉक्स 2 और 4 का चयन किया जाएगा तो परिणाम होगा: "3,8"

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

मैंने यहाँ जाँच की: http://api.jquery.com/checked-selector/ लेकिन इसके नाम से चेकबॉक्स समूह का चयन करने का कोई उदाहरण नहीं है।

मैं यह कैसे कर सकता हूँ?

Question 2

JQuery में बस एक विशेषता चयनकर्ता का उपयोग करें

$('input[name="locationthemes"]:checked');

"लोकतन्त्र" नाम के साथ सभी जांचे गए इनपुटों को चुनने के लिए

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

डेमो

में VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

डेमो

ईएस 6 / प्रसार ऑपरेटर में

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

डेमो

Question 3

$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

वर्किंग डेमो

या

JQuery के is()फ़ंक्शन का उपयोग करें :

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

Question 4

नक्शा सरणी सबसे तेज और साफ है।

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

मानों को सरणी के रूप में लौटाएगा:

array => [2,3]

संभालने महल और खलिहान की जाँच की गई और अन्य नहीं थे।

Question 5

$("#locationthemes").prop("checked")

Question 6

Jquery के mapफ़ंक्शन का उपयोग करना

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});

Question 7

You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();

Question 8

तो सभी एक लाइन में:

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

.. चयनकर्ता के बारे में ध्यान दें [id*="checkbox"], यह स्ट्रिंग "चेकबॉक्स" के साथ किसी भी आइटम को ले जाएगा। यहाँ थोड़ा सा अनाड़ी, लेकिन वास्तव में अच्छा है अगर आप किसी .NET CheckBoxList की तरह कुछ चुनिंदा मूल्यों को खींचने की कोशिश कर रहे हैं। उस स्थिति में "चेकबॉक्स" वह नाम होगा जिसे आपने चेकबॉक्सवादी नियंत्रण दिया था।

Question 9

स्रोत - अधिक विस्तार

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

फिर हम प्रत्येक jQuery का उपयोग करके सरणी में चयनित चेकबॉक्स मान प्राप्त करने के लिए jQuery स्क्रिप्ट लिखते हैं। इस jQuery फ़ंक्शन का उपयोग करके यह जाँच की गई मान प्राप्त करने के लिए एक लूप चलाता है और इसे एक सरणी में रखता है।

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Get Selected Checkboxes Value Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn").click(function() {
                var locationthemes = [];
                $.each($("input[name='locationthemes']:checked"), function() {
                    locationthemes.push($(this).val());
                });
                alert("My location themes colors are: " + locationthemes.join(", "));
            });
        });
    </script>
    </head>
    <body>
        <form method="POST">
        <h3>Select your location themes:</h3>
        <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
        <label for="checkbox-1">Castle</label>
        <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
        <label for="checkbox-2">Barn</label>
        <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
        <label for="checkbox-3">Restaurant</label>
        <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
        <label for="checkbox-4">Bar</label>
        <br>
        <button type="button" class="btn">Get Values</button>
    </form>
    </body>
    </html>

Question 10

var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});

Question 11

var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});

Question 12

Jquery 3.3.1, बटन क्लिक पर सभी चेक किए गए चेक बॉक्स के लिए मान प्राप्त करना

$(document).ready(function(){
 $(".btn-submit").click(function(){
  $('.cbCheck:checkbox:checked').each(function(){
	alert($(this).val())
  });
 });			
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1"  class="cbCheck" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2"  class="cbCheck" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3"  class="cbCheck" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit" class="btn-submit">

स्निपेट का विस्तार करें

Question 13

इसे करने के लिए थोड़ा और आधुनिक तरीका:

const selectedValues = $('input[name="locationthemes"]:checked').map( function () { 
        return $(this).val(); 
    })
    .get()
    .join(', ');

हम पहले दिए गए नाम के साथ सभी चयनित चेकबॉक्स ढूंढते हैं, और फिर jQuery का नक्शा () उनमें से प्रत्येक के माध्यम से पुनरावृत्ति करता है, मूल्य प्राप्त करने के लिए उस पर कॉलबैक कॉल कर रहा है, और परिणाम को एक नए jQuery संग्रह के रूप में लौटाता है जो अब चेकबॉक्स मान रखता है। हम तब मानों की एक सरणी प्राप्त करने के लिए उस पर कॉल () प्राप्त करते हैं, और फिर उन्हें एक स्ट्रिंग में समेटने के लिए शामिल होते हैं (- जो तब निरंतर चयनित विचलन को सौंपा जाता है।