更新 - 02/02/2014

Question

我将开始告诉我正在使用Bootstrap 3及其用于单选按钮的按钮系统：

Buttons

因此，无论单击这些按钮，另一个按钮都将被取消所以我正在努力获得检查的按钮的值，并通过AJAX调用将其发送到PHP脚本。我的问题是纯粹的jQuery / Javascript，但我一直在尝试alert()正确的值，但我无法在那里得到它。

所以问题出现如下（演示尝试）：

我点击一个按钮
我alert其价值

我每次都得到错误的结果。所以，当我点击 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并将其放在data的{{1}}选项中，我认为这与我们无关。

这就是HTML的样子：

$.ajax

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

Buttons2

我对Javascript中的这些参考技术不太熟悉，但我真的很有兴趣学习它并摆脱这个卡住区。

更新 - 02/02/2014

我已经按照 code-jaff的回答，这是我现在的代码：

<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>

请注意，我没有提交常规表格，我只是不想让我的问题复杂化，因为我认为这是无关紧要的，但我想是的。我正在使用一个名为 jQuery File Upload 的jQuery插件，我需要将所选的数字与表单一起发送。我就是这样做的：

var selected_thumbwidth = { thumbWidth: 110 };

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

我认为使用对象使我能够通过引用分配值，因此当单击其他按钮时，我将单选按钮的值传递给对象的$('#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(), }, ...属性，然后它会自动提交更改的使用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(),
    }    
});

Answer 2

这是您简化的HTML

    <input class="btn-xs" type="radio" name=btn-xs value="110" checked>90</input>
    <input class="btn-xs" type="radio" name=btn-xs value="110">110</input>
    <input class="btn-xs" type="radio" name=btn-xs value="130">130</input>
    <input class="btn-xs" type="radio" name=btn-xs value="160">160</input>
    <input class="btn-xs" type="radio" name=btn-xs value="200">200</input>

添加javascript函数

onclick="alert(this.value)"

附加到每个输入。

    <input class="btn-xs" type="radio" name=btn-xs value="110" checked onclick="alert(this.value)">90</input>
    <input class="btn-xs" type="radio" name=btn-xs value="110" onclick="alert(this.value)">110</input>
    <input class="btn-xs" type="radio" name=btn-xs value="130" onclick="alert(this.value)">130</input>
    <input class="btn-xs" type="radio" name=btn-xs value="160" onclick="alert(this.value)">160</input>
    <input class="btn-xs" type="radio" name=btn-xs value="200" onclick="alert(this.value)">200</input>

如果你想获得更好（更干净），请查看如何将click函数附加到由类名选择的元素（jQuery是最简单的）。这是一个link。

Answer 3

这是错的！您应该使用浏览器功能！如果为所有单选按钮指定名称组，则可以选中并取消选中单选框！然后在CSS中，您可以设计未经检查和选中的单选按钮。

另一个解决方案是将所有活动类删除到组中的所有单选按钮，并仅将类分配给选定的类。

这是一个例子： http://jsfiddle.net/xQ2HL/1

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  <title></title>
  <style>
  .active:before { content: "->" }
  .active{ width: 40px; }
  </style>
  <script src="jquery-1.11.0.min.js"></script>
  <script type="text/javascript">

  $(function(){
    // Binding for the radio button
    $("input[type=radio][name=group1]").click(function(){

      // Get the value
      var value = $(this).val();

      // Reset active state class
      $("input[type=radio][name=group1]").removeClass("active");

      // Assign the new active class to the clicked element
      $(this).addClass("active");

      // Ajax query or whatever you want to do here
      // ...

    });
  });
  </script>


  <body>
    90: <input type="radio" name="group1" value="90" /><br>
    110: <input type="radio" name="group1" value="110" /><br>
    130: <input type="radio" name="group1" value="130" /><br>
  </body>
</html>

动态获取已检查输入的值并使用AJAX发送

更新 - 02/02/2014

3 个答案: