0

我有一个复选框项目列表，其中包含“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)。

我感谢你的帮助。

4

1 回答 1

1

我已经为你完成了逻辑（小提琴）。它确实：

  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>​
于 2012-11-19T13:00:54.070 回答