動態獲取檢查輸入的值並使用AJAX發送

Question

我將開始告訴我我將Bootstrap 3及其按鈕系統用於單選按鈕：

因此，無論單擊這些按鈕中的哪個按鈕，都會取消單擊另一個按鈕。
因此，我正在苦苦掙扎的是獲取被檢查按鈕的值，並通過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();
});

然后在click回調之外發出alert這將為我提供如上所述的結果。 為什么選擇.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/02/02

我遵循了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'));
});

演示

根據問題的更新，您需要在上傳開始時設置數據-我剛剛閱讀了文檔

$('#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最簡單）。 這是一個鏈接 。

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>