При выборе переключателя, как я могу проверить, если другой уже выбран? - PullRequest
Новая
       9

При выборе переключателя, как я могу проверить, если другой уже выбран?

0 голосов
/ 27 декабря 2018

У меня есть таблица с группами по 2 переключателя в каждом ряду - это выбор да / нет для серии вопросов.

Выбор YES увеличивает переменную для отслеживания общего количества ответов YES.Выбор NO ничего не делает, если YES уже не выбран, и в этом случае он уменьшает общее количество.

Я могу увеличить ДА легко peasy.Проблема заключается в определении состояния ДА при выборе НЕТ, поскольку при выборе НЕТ ДА больше не выбирается, прежде чем я смогу выполнить тестирование.Кнопка Шредингера?

Как я могу щелкнуть НЕТ и проверить состояние ДА до его изменения? 

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

}

Ответы [ 4 ]

0 голосов
/ 27 декабря 2018

Вот что сработало, я ценю комментарии и ответы, они указали мне на решение. 

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);
  }
});
0 голосов
/ 27 декабря 2018

Просто увеличивайте или уменьшайте счетчик при каждом нажатии кнопки в наборе.Обязательно проверьте значения <= 0. </p> 

// 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;
  });
});
<input type="radio" name="yesNo" value="Yes" class="yesNo"> Yes
<input type="radio" name="yesNo" value="No" class="yesNo"> No
<div id="total"></div>
0 голосов
/ 27 декабря 2018

Вы можете использовать объект для отображения значений для ответов, чтобы вы могли отслеживать, какие ответы были даны ответы.Если обе функции (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);
}
0 голосов
/ 27 декабря 2018

Вы можете использовать onmousedown вместо onchange.Это выполняется до того, как значения кнопок будут изменены, чтобы отразить результат нажатия.

Но вместо увеличения и уменьшения счетчика хода проще просто посчитать все кнопки YES, чтобы получить общее количество. 

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