d3js:创建多个单选按钮

d3js: Creating multiple radio buttons

本文关键字:单选按钮 创建 d3js      更新时间:2023-09-26

我正试图使用d3创建两个单选按钮,但我似乎遇到了一些问题。我可以创建和标记两者,但他们不知道另一个已经创建。例如,如果选择了OR按钮,而我选择了AND按钮,则不会取消选择OR按钮。

我能够在小提琴中重现我的问题,代码如下:

var body = d3.select("body")
var form = body.append('form');
form.append('input')
    .attr('type', 'radio')
    .attr('value', 'Or')
    .on('click', function () {
        //Do something
    });
form.append('label')
    .html('OR');
form.append('input')
    .attr('type', 'radio')
    .attr('value', 'And')
    .on('click', function () {
        //Do something
    });
form.append('label')
    .html('AND');

通过为两个单选按钮分配一个名称来解决问题。

点击此处查看更新的小提琴

var body = d3.select("body")
var form = body.append('form');
form.append('input')
    .attr('type', 'radio')
    .attr('value', 'Or')
    .attr('name', 'toggle')
    .on('click', function () {
        //Do something
    });
form.append('label')
    .html('OR');
form.append('input')
    .attr('type', 'radio')
    .attr('value', 'And')
    .attr('name', 'toggle')
    .on('click', function () {
        //Do something
    });
form.append('label')
    .html('AND');