（飞镖）我希望触发两个不同的onclick函数，具体取决于单击时是否选中了单选按钮。 我怎么做？

Question

我正在开发一个游戏项目，其中用户必须单击随机选中的单选按钮。

如果他单击了选中的单选按钮，则会随机生成另一个按钮，而未选中他刚刚单击的按钮。

如果他单击未选中的单选按钮，则会输掉比赛。

因此，两次单击均会触发不同的功能。

现在我有：

var Buttons = querySelectorAll('input[type="radio"]');

Buttons.onClick.listen(
  (event) => hithead(id));

不管是否选中，所有单选单击都将具有相同的功能。 如何使它仅在选中了单击的收音机时才使用一个，而在未选中的单击收音机时才使用另一个？

编辑

我试过使用这样的东西：

Buttons.onClick.listen(
 if(Buttons.checked == true){
    (event) => function1();
  }
  else{
    function2();
  }

但是它不起作用并且给我一些错误

EDIT2

Buttons.onClick.listen((event) {
if (event.target.id == currentRadioId) {
  function1();
  currentRadioId = event.target.id;
}
else {
  function2();
  currentRadioId = event.target.id;
}
});

EDIT3

var Buttons= querySelectorAll('input[type="radio"]');
String currentRadioId = "";

Buttons.onClick.listen(clickradio);

clickradio(MouseEvent event) {
InputElement checkradio = event.target;
var checked = checkradio.checked;
if (checked){
function1();
} else {
function2();
}
}

Answer 1

我没有像您一样使用箭头功能，也没有使用单选按钮，但是我的示例代码可能为您提供了一条线索-您可以从event对象中检索checked属性（以及根据需要获取其他属性）：

HTML

<input type="checkbox">
<div></div>

镖

import 'dart:html';

void main() {
  querySelector('input')
      ..onClick.listen(clickFun);
}

void clickFun(MouseEvent event) {
  // please note here how I get the checked property
  InputElement checkbox = event.target;
  var checked = checkbox.checked;
  if (checked) {
    writeLog('checked');
  } else {
    writeLog('unchecked');
  }
}

void writeLog(log) {
  querySelector('div').text = log;
}

---

编辑

关于OP的评论，我认为他误解了单选按钮的用例。 解释如下：

单选按钮 （ <input type="radio" >）通常用于一组互斥的选项，并且您只能在其中选择一个 。 所以，你点击任何一个单选按钮，其检查状态始终选中后，表示你选择了该选项。

在下面的演示中，您将永远不会看到提示false的警报，您所得到的都是true ：

 <label><input type="radio" name="r" value="1" onclick="alert(this.checked)"> 1</label> <br> <label><input type="radio" name="r" value="2" onclick="alert(this.checked)"> 2</label> <br> <label><input type="radio" name="r" value="3" onclick="alert(this.checked)"> 3</label> 

另一方面，在上一个答案中，我使用了Checkbox （ <input type="checkbox" >）。 这用于切换单个选项的开/关状态（与互斥选项之一相对）。 试试这个演示，您将看到为什么我建议在单选按钮上选中复选框。

 <label><input type="checkbox" name="c" value="c" onclick="alert(this.checked)"> checkbox</label> 

---

但是，如果你仍然想单选按钮的外观 ，你可以忽略它的外观：

 input { -webkit-appearance: radio; } 

 <label><input type="checkbox"> This is a checkbox, I swear!</label> 

Answer 2

当单击事件触发您的单选按钮时，必须检查其状态。 你可以保持跟踪id当前选定的单选按钮和比较，对id为其点击触发的事件之一的。 如果不相同，则用户单击了未选中的单选

在原始选择器下声明一个字符串：

var elemDmz = querySelectorAll('input[type="radio"]');
String currentRadioId = '';

您可以执行以下操作：

elemDmz.onClick.listen((event) {
  if (event.target.id == currentRadioId) {
    print('checked radio clicked');
    currentRadioId = event.target.id;
  } else {
    print('unchecked radio clicked');
    currentRadioId = event.target.id;
  }
});