在jQuery中使用多個具有相同名稱的單選框

Question

我第一次使用jquery，我想從同一個復選框中獲取一個值。

我的代碼是：

 $(document).ready(function() { $('a#process_input').bind('click', function() { $(":checked").each(function() { $.getJSON('/management/avaliable_numbers', { num_of_numbers: $('input[name="num_of_numbers"]').val(), }, function(data) { $("#result").html(data.result); }) }); return false; }); }); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <div class='container'> <form> <div> <input type="radio" name="num_of_numbers" value="10"> 10 <input type="radio" name="num_of_numbers" value="100"> 100 <input type="radio" name="num_of_numbers" value="1000"> 1000 <a href='#' id=process_input> <button type="button" class="btn">Choose</button> </a> </div> <p id=result></p> </div> 

它是jquery + flask教程中的現成代碼，其中包含我在Internet上發現的資源中的一些混搭。 如您所料，它無法正常工作。 無論我選擇哪個選項（即使我不選擇任何選項），腳本都將10發送到avaliable_numbers函數。

我正在尋找一種解釋，說明如何正確實現該方法，因此當我在框上未進行任何選擇時，它不會通過函數傳遞相應值的任何內容。

預先感謝您的任何建議。

Answer 1

好的，我將對您的腳本進行一些更改（代碼中的注釋說明了什么以及為什么）

  $(document).ready(function() { $('a#process_input').on('click', function(e) { // change bind to on as bind is deprectaed in jquery v3 // also pass the event back into the function e.preventDefault(); // stops the form submitting - you don't want it to reload the page - removes the need for returning false at the end if ($('input[name="num_of_numbers"]:checked').length) { // only do the following if there is something checked // remove each loop - not needed as you only want to pass the checked value to the json $.getJSON('/management/avaliable_numbers', { num_of_numbers: $('input[name="num_of_numbers"]:checked').val(), // just pass through the checked value }, function(data) { $("#result").html(data.result); }); } else { $("#result").html('error message - please check a radio'); // nothing checked - might want an error message } }); }); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <div class='container'> <form> <div> <input type="radio" name="num_of_numbers" value="10"> 10 <input type="radio" name="num_of_numbers" value="100"> 100 <input type="radio" name="num_of_numbers" value="1000"> 1000 <a href='#' id=process_input> <button type="button" class="btn">Choose</button> </a> </div> </form> <!-- add missing form closing tag --> <p id=result></p> </div> 

Answer 2

這可能是進行您嘗試的API調用的簡便方法。 它主要取決於以下事實：命名輸入可直接在父表單元素上使用。

 $(document).ready(function() { // Get ref to the form element var form = $('form')[0]; // Register click handler on the button $('a#process_input').on('click', function() { // The current value will be available as form.num_of_numbers.value var num_of_numbers = form.num_of_numbers.value; if(!num_of_numbers){ // No value selected return; } //When the click happens, pass the current selected value to the API call $.getJSON('/management/avaliable_numbers', { num_of_numbers: num_of_numbers, }, function(data) { // Update result div $("#result").html(data.result); }) }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class='container'> <form> <div> <input type="radio" name="num_of_numbers" value="10"> 10 <input type="radio" name="num_of_numbers" value="100"> 100 <input type="radio" name="num_of_numbers" value="1000"> 1000 <a href='#' id=process_input> <button type="button" class="btn">Choose</button> </a> </div> </form> <p id=result></p> </div> 

Answer 3

 // fake out getJSON for StackOverflow jQuery.getJSON = function (url, options, callback) { callback({ result: 'weeee: '+ options.num_of_numbers }); }; $(document).ready(function() { // cache the element lookup var $numOfNumbers = $('.num-of-numbers'); $('#process_input').on('click', function(e) { // preventDefault rather than returning false // as false does more than just preventing default e.preventDefault(); // check if any of the radio buttons are checked if ($numOfNumbers.filter(':checked').length) { $.getJSON('/management/avaliable_numbers', { // get the value of the checked radio num_of_numbers: $numOfNumbers.filter(':checked').val(), }, function(data) { $("#result").html(data.result); }) } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <form> <div> <input type="radio" name="num_of_numbers" value="10" class="num-of-numbers"> 10 <input type="radio" name="num_of_numbers" value="100" class="num-of-numbers"> 100 <input type="radio" name="num_of_numbers" value="1000" class="num-of-numbers"> 1000 <a href="#" id="process_input"> <button type="button" class="btn">Choose</button> </a> </div> <p id="result"></p> </div>