javascript - 动态获取选中输入的值并使用 AJAX 发送

Question

我将开始讲述我正在使用 Bootstrap 3 及其用于单选按钮的按钮系统:

因此，无论点击哪个按钮，都会取消点击另一个按钮。
因此，我正在努力解决的问题是获取选中的按钮的值，并通过 AJAX 调用将其发送到 PHP 脚本。虽然我的问题是纯粹的 jQuery/Javascript，但我一直在尝试 alert() 正确的值，但我无法在那里得到它。

于是出现如下问题(demo try):

• 我点击一个按钮
• 我提醒它的值(value)

我每次都得到错误的结果。因此，当我单击 130 时，我得到了 110，然后我继续单击 160，然后我得到了 130，依此类推。我总是后退一步。

在实际项目中，我需要获取这个值并通过 AJAX 调用发送它，这样我就可以在我的 PHP 脚本中根据这个数字确定一些东西。
我尝试这样做的方法是创建一个 JS 对象，例如:

var selected_thumbwidth = { width: 110 };

然后像这样改变它的值:

$('.thumb-sizes .btn').click(function() {
    selected_thumbwidth.thumbWidth = $('.thumb-sizes .active').children().val();
});

然后 alert 在 click 回调之外进行此操作会给我上面描述的结果。为什么我要选择 .active 类？好吧，只要单击一个按钮，.active 类就会转移到该按钮，使其看起来像是被按下了。这是来自 Bootstrap。

我希望能够获取 selected_thumbwidth.thumbWidth 并将其放入 $.ajax 的 data 选项中，我猜这是无关紧要。

这是 HTML 的样子:

<div class="options">
    <span class="glyphicon glyphicon-resize-small valign-middle pointer resize-toggle" title="Resize your image on the fly to the size of your choice. Proportions will be kept."></span> 
    <span class="glyphicon glyphicon-adjust valign-middle pointer thumb-toggle" title="Change the thumbnail size of your image. The sizes are measured in pixels. Proportions will be kept."></span>

    <div class="hidden thumb-options">
        &nbsp;
        <div class="form-group">
            <div class="btn-group mg-top thumb-sizes" data-toggle="buttons">
                <label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label>
                <label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110" checked>110</label>
                <label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label>
                <label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label>
                <label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label>

                &nbsp;<button type="button" class="close" aria-hidden="true">&times;</button>
            </div>
        </div>
    </div>

    <div class="hidden resize-options">
        <button type="button" class="close pull-right" aria-hidden="true">&nbsp;&times;</button>
        &nbsp;<input class="form-control input-sm pull-right resize_width" type="text" pattern="[0-9]{0,5}" placeholder="New width (px)">
    </div>
</div>

请注意，HTML 比我在上图中显示的要多。完整的 HTML 设计在现实世界中看起来像这样:

我对 Javascript 中的这些引用技术不是很熟悉，但我真的很想学习它并摆脱这个困境。

---

更新 - 2014 年 2 月 2 日

我遵循了 code-jaff 的 答案，这是我现在的代码:

var selected_thumbwidth = { thumbWidth: 110 };

$('.btn input[type="radio"]').on('change', function() {
    selected_thumbwidth.thumbWidth = $(this).data('val');
});

请注意，我不是在提交常规表格，我只是不想使我上面的问题复杂化，因为我认为它是无关紧要的，但我想它是。我正在使用名为 jQuery File Upload 的 jQuery 插件，我需要将选定的号码与表单一起发送。我是这样做的:

$('#upload').fileupload({
    dropZone:                   $('#drop'),
    pasteZone:                  $('#drop'),
    url:                        'upload.php',
    type:                       'POST',
    limitMultiFileUploads:      10,
    fileInput:                  $('#upload_button'),
    formData: { 
        upload_type: 'local', 
        thumbnail_width: selected_thumbwidth.thumbWidth,
        resize_width: $('.options .resize_width').val(),
    },
    ...

我认为使用一个对象可以让我通过引用分配一个值，所以当点击一个不同的按钮时，我将单选按钮的值传递给对象的 thumbWidth 属性，然后它会自动使用 AJAX 请求提交更改后的值。

在我的例子中，它一直在发送 110，即使我点击了不同的按钮也是如此。

我假设通过引用分配不是这里的解决方案。

Answer 1

这是一个简单的解决方案，可以帮助您找到问题的实际解决方案

HTML

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1" data-val = "110"> 110
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" data-val = "120"> 120
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" data-val = "130"> 130
  </label>
</div>

JavaScript

$('.btn input[type="radio"]').on('change', function(e){
    alert($(this).data('val'));
    console.log($(this).data('val'));
});

demo

根据问题更新，您需要在上传开始时设置数据 - 我刚刚完成了 documentation

$('#upload').on('fileuploadsubmit', function (e, data) {
    // other options go here 
    // ...
    data.formData = { 
            upload_type: 'local', 
            thumbnail_width: $('.btn.active input[type="radio"]').data('val'),
            resize_width: $('.options .resize_width').val(),
    }    
});