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 : 어떤이가하는 것은 #resultsection 내부 선택한 항목의 값을 표시입니다

$('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); 
}); 

합니다. 필요한 것은 두 개의 값만 가져 와서 두 개의 쿠키 변수로 저장하여 페이지를 다시로드 한 후이를 사용하는 것입니다. 그런 다음 버튼을 추가하여 (첫 번째 값 - 두 번째 값 = % 결과) 두 값을 비교할 수 있습니다.

도움을 주셔서 감사합니다.

Answer 1

나는 당신을 위해 논리를했습니다 (fiddle). 그것은 수행합니다

1. 안 입력 상자 2 후 선택
2. 저장 선택한 두 값을 배열의 참과 거짓에 대한 비교합니다.

이제 쿠키에 값을 저장하고 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>​