Question

我有一张桌子，每行有2个单选按钮组-这是对一系列问题的是/否选择。

选择“是”会增加一个变量，以跟踪所有“是”答案。除非已经选择“是”，否则选择“否”将不执行任何操作，在这种情况下，它将使总数减少。

我可以增加“是”。问题是在选择“否”时检测到“是”状态，因为通过选择“否”，在测试之前不再选择“是”。薛定ding的按钮？

如何在更改之前单击“否”并测试“是”的状态？

<input type='radio'  id = 'q1Y' name='q1' value='1Y' onChange='countY(this.id);'>
<input type='radio'  id = 'q1N' name='q1' value='1N'  onChange='countN(this.id);'>

function countN(id){
q = id.slice(0, -1);
/////////////////
//
// The problem is here.  By the time the code reaches this point, Y is already unchecked
//
////////////////
if($('#'+q+'Y').prop('checked')===true){
    score--;
    $("#scoretotal").html(score);
}

}

Answer 1

您可以使用onmousedown代替onchange。这将在更改按钮的值以反映单击结果之前运行。

但是，与增加和减少运行计数相比，只对所有YES按钮进行计数以获得总数更为简单。

function count() {
    var total = $(":radio[value$=Y]:checked").length;
    $("#scoretotal").html(total);
}

Answer 2

每次单击一个按钮时，只需增加或减少一个计数器即可。确保检查<= 0个值。

by.data.frame()

// Get both buttons into an Array
let yesNo = Array.prototype.slice.call(document.querySelectorAll(".yesNo"));

let total = document.getElementById("total");

let yesses = 0;

// Loop the Array
yesNo.forEach(function(btn){
  // Set up event handler
  btn.addEventListener("click", function(){
    if(this.value === "Yes"){
      yesses++;
    } else {
      yesses = yesses - 1 <= 0 ? 0 : yesses - 1;
    }
    
    total.textContent = yesses;
  });
});

Answer 3

您可以使用一个对象来映射答案的值，以便跟踪所回答的答案。如果两个函数（countY和countN）都具有相似的功能，则您还可以按以下方式重用代码：

<input type='radio'  id = 'q1Y' name='q1' value='1Y' onChange='count(this.name, true);'/>
<input type='radio'  id = 'q1N' name='q1' value='1N'  onChange='count(this.name, false);'/>


var map = {};
function count(id, bool){
    map[id] = bool;
    let scoreTotal = Object.keys(map).filter(keyName => map[keyName]).length;
    // if you want to know how many NOs
    let negative = Object.keys(map).filter(keyName => map[keyName] === false).length;
    $("#scoretotal").html(scoreTotal);
}

Answer 4

这是有效的方法，我感谢您的评论和回答，他们为我指出了解决方案。

var score=0;
$('input[type=radio]').mousedown(function(){

   question = this.value.slice(0, -1) // which button group?
   YN = this.value.substr(this.value.length - 1); // Y or N?

  if(YN=="Y"){
     $('#q'+question+'Y').prop('checked', true);  // set the buttons
     $('#q'+question+'N').prop('checked', false);       
     score++;
     $("#scoretotal").html(score);
  }
  else{
      if($('#q'+question+'Y').prop('checked')){ 
      //This is the test that made the difference because the other button hadn't been unchecked yet
          score--;
          $("#scoretotal").html(score);
       }
       $('#q'+question+'Y').prop('checked', false); //set the buttons
       $('#q'+question+'N').prop('checked', true);
  }
});

选择单选按钮时，如何测试是否已选择另一个按钮？

4 个答案: