Question

我有一个包含下拉菜单的表单，用户可以在其中为每个问题选择“是”或“否”值。然后在底部，计算在span标签中选择了多少个“是”。

例如，有没有一种方法可以使用Javascript计算第一个span标记中值的百分比。如果用户在24个问题中选择了12个，则将其输出为50％？

这是我有问题的两个span标签...

  <div class="Score">
    Total Score  = <span class="cnt-yes">0</span> out of 24 <br>
  </div>

  <div class="Percentage">
    Audit Result = <span class="cnt-percent">0</span>% <br>
  </div>

这是Javascript函数，用于计算第一个span标签的值...

$('select').change(function() {
// get all selects
var allSelects = $('select');

// set values count by type
var yes = 0;
var no = 0;

// for each select increase count
$.each(allSelects, function(i, s) {
    // increase count
    if($(s).val() == 'Yes') { yes++; }
    if($(s).val() == 'No') { no++; }
});

// update count values summary
$('.cnt-yes').text(yes);
$('.cnt-no').text(no);

}）;

以下是前两个问题的选择标签。

  <div id="hiddenQuestion1">
  <strong>1. Are the Team Players Wearing Gloves for the correct procedure?</strong> <select id="questions1" name="question1">
    <option value=""></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select><br><br>
  </div>

  <div id="hiddenQuestion2" style="display:none">
  <strong>2. Are Team Players using the ESD station and signing daily sheet?</strong> <select id="questions2" name="question2">
    <option value=""></option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select><br><br>
  </div>

Answer 1

您可以通过将是答案的数量除以问题总数并将结果乘以100来获得百分比。由于这可能会导致浮点数，因此您应在之后将结果四舍五入。

12/24 = 0.5 * 100 = 50

因此，在此阻止之后：

$.each(allSelects, function(i, s) {
    // increase count
    if($(s).val() == 'Yes') { yes++; }
    if($(s).val() == 'No') { no++; }
});

插入

var total=Math.round(yes/24*100);
$('.cnt-percent').text(total);

Answer 2

这就是我使用香草Javascript的方式：

SELECT EventName
FROM (SELECT ContinentID, EventName,
             DENSE_RANK() OVER (ORDER BY cnt, ContinentID) as seqnum
      FROM (SELECT c.ContinentID, e.EventName
                   COUNT(*) OVER (PARTITION BY c.ContinentID) AS cnt
            FROM [WorldEvents].[dbo].[tblCountry] c INNER JOIN 
                 [WorldEvents].[dbo].[tblEvent] e
                 ON e.[CountryID] = c.CountryID
           ) ce
     ) ce
WHERE seqnum <= 3;

const selects = [...document.querySelectorAll('select')];

for (const select of selects) {
  select.value = '';
  select.addEventListener('change', () => {
    count.textContent = `${selects.filter(x=>x.value==='yes').length} of ${selects.length} selected 'yes'`;
    percent.textContent = `${( selects.filter(x=>x.value==='yes').length / selects.length * 100).toFixed(2)} % selected `;
  })
}

Answer 3

$(function(){
        
     ch_sel();
    }); 
     
     function ch_sel(){
         
         var target_span = $('#span1');
         
         count_yes_no(target_span);
     }
     
     
     function count_yes_no(spn) {
         
               var yes = 0;
               var no = 0;
               var l = 0;
        spn.find('select').each(function(){


           if($(this).val() == 'Yes') { yes++; }
           if($(this).val() == 'No') { no++; }  
           l++;
        });
        
        // update count values summary
        $('.cnt-yes').text(yes);
        $('.cnt-no').text(no); 
        
        $('.len').text(parseInt(l)); 
        $('.cnt-percent-y').text((yes*100 / l).toFixed(2)); 
        $('.cnt-percent-n').text((no*100 / l).toFixed(2)); 
        
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
    <select onchange="ch_sel();">
        <option value="Yes">yes</option> 
        <option value="No">no</option>
    </select>
    <select onchange="ch_sel();">
        <option value="Yes">yes</option> 
        <option value="No">no</option>
    </select>
    <select onchange="ch_sel();">
        <option value="Yes">yes</option> 
        <option value="No">no</option>
    </select>
    <select onchange="ch_sel();">
        <option value="Yes">yes</option> 
        <option value="No">no</option>
    </select>
</span>

  <div class="Score">
    Total Score  = <span class="cnt-yes">0</span> out of <span class="len">24</span> <br>
  </div>

  <div class="Score">
    Total Score  = <span class="cnt-no">0</span> out of <span class="len">24</span> <br>
  </div>

  <div class="Percentage">
    Audit Result no = <span class="cnt-percent-n">0</span>% <br>
  </div>

  <div class="Percentage">
    Audit Result yes = <span class="cnt-percent-y">0</span>% <br>
  </div>

计算跨度标签中值的百分比

3 个答案: