0

「30％」、「20％」などの数値のチェックボックス項目のリストがあり、ユーザーが2つのボックスのみをチェックして比較し、正または負の差の値を表示できるようにしたい。私は次のコードから始めました：

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内に表示します。必要なのは、2つの値のみを取得し、それらを2つのCookie変数として保存して、ページのリロード後にそれらを利用することです。次に、ボタンを追加して、（first-value --second-value =％result）のように2つの値を比較できます。

よろしくお願いします。

4

1 に答える 1

1

私はあなたのためにロジックを実行しました（フィドル）。します：

  1. 2つの選択後に入力ボックスを無効にする
  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>​
于 2012-11-19T13:00:54.070 に答える