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);
 });

这样做是显示#result部分内所选项目的值。我需要的是只获取两个值并将它们存储为两个cookie变量，以便在页面重新加载后使用它们。然后我们可以添加一个按钮来比较两个值，如（first-value - second-value =％result）。

我感谢你的帮助。

Answer 1

我为你完成了逻辑（fiddle）。它确实：

2次选择后禁用输入框
将选定的2个值存储在数组中，并将它们与true和false进行比较。

现在，您只需将值存储在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>

jquery比较列表中的两个选中项

1 个答案: