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调用更简单的方法。它基本上取决于以下事实：命名输入可以直接在父表单元素上使用。

const createPayeeEpic = (actions$: Observable<Action>) =>
    actions$.pipe(
        filter(CreateAction.start.match),
        mergeMap((action) =>
            from(MoneyPinApiClient.getInstance().payee.create(CreateRequestAdapter(action.payload))).pipe(
                map((response) => CreateAction.success({
                    params: action.payload,
                    result: CreateResultAdapter(response.data)
                })),
                catchError((err) => of(
                    <any>CreateAction.failure({params: action.payload, error: err}),
                    <any>MoneyPinApiErrorAction(err)
                ))
            )
        )
    );
const createTransactionEpic = (actions$: Observable<Action>) =>
    actions$.pipe(
        filter(CreateAction.start.match),
        mergeMap((action) => {
            if(!isUuid(action.payload.payee) {
               **EMIT PayeeCreateAction.start({name: action.payload.payee})**
               **WAIT FOR PayeeCreateAction.success (or PayeeCreateAction.failure)**
               action.payload.payee = resultOf(PayeeCreateAction.success).id;
            }
            return from(MoneyPinApiClient.getInstance().transaction.create(CreateRequestAdapter(action.payload))).pipe(
                map((response) => CreateAction.success({
                        params: action.payload,
                        result: CreateResultAdapter(response.data)
                    })),
                catchError((err) => of(
                    <any>CreateAction.failure({params: action.payload, error: err}),
                    <any>MoneyPinApiErrorAction(err)
                ))
            )
        })
    );

createTransactionEpic

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>

在jQuery中使用多个具有相同名称的单选框

3 个答案: