jquery比較列表中的兩個選中的項目

Question

我有一個複選框項目的列表，其中包含「30％」，「20％」等數字值，我希望允許用戶只選中兩個框並對它們進行比較，顯示正面或負面的差異值。我已經開始用下面的代碼：

HTML：

<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">10%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">20%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">40%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">60%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">80%</label> 

<div id="resultsection"></div> 

JS：

$('input[type="checkbox"]').live('click', function() { 
    var selected = ''; 
    $('input[type="checkbox"]').each(function(index, value) { 
        if (this.checked) { 
            selected += ($('label[for="'+this.name+'"]').html() + ', '); 
        } 
    }); 
    if (selected.length > 0) { 
        selected = "You have selected the following: <br /> " + selected.substring(0,selected.length-2) + '.<br />'; 
    } else { 
        selected = 'No metrics selected.'; 
    } 
    
    $('#resultsection').html(selected); 
}); 

這樣做是顯示#resultsection內選定項的值。我需要的只是獲取兩個值並將它們存儲爲兩個Cookie變量，以便在頁面重新加載後使用它們。然後我們可以添加一個按鈕來比較兩個值之間的關係，如（first-value - second-value =％result）。

我感謝你的幫助。

Answer 1

我已經爲你做了邏輯（fiddle）。它的作用：選擇

1. 禁用輸入框2後
2. 存儲所選擇的2個值中的陣列，並比較它們對真假。

現在，您只需將值存儲在cookie中，並執行任何您想使用2值的操作。

$('input[type="checkbox"]').live('click', function() { 
    var selected = ''; 
    var values = []; 

    $('input[type="checkbox"]').each(function(index, value) { 
     if (this.checked) { 
      selected += "<span>" + $(this).next().html() + " </span> "; 
      values.push($(this).next().html()); 
     } 

      if($('input[type="checkbox"]:checked').length > 1) { 
      $('input[type="checkbox"]').each(function(index, value) { 
       if (!this.checked) { 
        $(this).attr("disabled", true); 
       } 
      }); 
     } 
    }); 

    if(values[0] == values[1]) { 
     console.log('true'); 
    } else { 
     console.log('false'); 
    } 

    if (selected.length > 0) { 
     selected = "You have selected the following: <br /> " + selected + '.<br />'; 
    } else { 
     selected = 'No metrics selected.'; 
    } 

    $('#resultsection').html(selected); 
});​ 


<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">10%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">20%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">40%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">60%</label> 
<input type="checkbox" class="box" name="metrics1" value="" /> 
    <label for="metrics1">10%</label> 
<div id="resultsection"></div>​