Question

在下面的代码片段中，我想检查是否已选中单选复选框：

＆＃13;

d3.selectAll("input[name='test1']").on("click", function() {
  // log 'this'
  console.log("this will always be true", d3.select(this).property("checked"))
  // log selected property yields different result on 'no'
  var selectTest = d3.selectAll("input[name='test1']").property("checked")
  console.log("This will be false on 'no': ", selectTest)
})

＆＃13;

<html>
<head>
<meta charset ="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

<input value="Yes" type="radio" name="test1">Yes
<input value="No" type="radio" name="test1">No

</body>
</html>

＆＃13;

如您所见，第一种方法

console.log("this will always be true", d3.select(this).property("checked"))

按预期工作，但当您选择＆＃34;否＆＃34;时，另一种方法会为您提供false值。出于某种原因，我无法弄清楚，我无法找到任何其他的例子。

Answer 1

解释很简单：您的选择包含两个元素。但是，getter只会获得第一个。

如果您使用each：

，则可以看到此信息

＆＃13;

d3.selectAll("input[name='test1']").on("click", function() {
  d3.selectAll("input[name='test1']").each(function(_, i) {
    console.log("radio " + (i + 1) + " is: " + d3.select(this).property("checked"))
  })
})

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<input value="Yes" type="radio" name="test1">Yes
<input value="No" type="radio" name="test1">No

＆＃13;

另一种显示更清晰的方法是以下演示：我选择所有圈子并使用getter获取fill值。尽管有两个圈子，蓝色和红色，但我只得到了＃34;蓝色＆＃34;结果（第一个）：

＆＃13;

console.log(d3.selectAll("circle").attr("fill"))

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <circle cx="100" cy="75" r="10" fill="blue"></circle>
  <circle cx="200" cy="75" r="10" fill="red"></circle>
</svg>

＆＃13;

Answer 2

您可以添加ID来区分这两者：

<input value="Yes" type="radio" name="test1" id="test1">Yes
<input value="No" type="radio" name="test1" id="test2">No

然后..

d3.select("input[id='test1']").on("click", function() {..})

如何检查d3.js中的checkbox属性？

2 个答案: