检查复选框是否被选中

Question

I have checkbox in my d3 tree. my code is as follows.

 nodeEnter.append('foreignObject').attr('width', '20')
        .attr("x", 200 / 2)
        .attr("y", 1)
        .attr('height', '20').append('xhtml:input')
        .attr('type', 'checkbox')
        // An on click function for the checkboxes
        .on("click",function(d){
            console.log(d)
        });

From this code I am able to catch data on click of checkbox. But with this I want to know whether the check box is checked or not. How can I do this?

Answer 1

In the click function you can access the node being clicked with this , and see if it is checked with this.checked

.on("click",function(d){
   var check = this.checked;
   console.log(check,d);             
});

Alternatively, you can use d3 to achieve the same thing with d3.select(this).property("checked"); As you are using d3v5 or earlier, you can also access the clicked node as follows:

.on("click",function(d,i,nodes){
        var check = nodes[i].checked;
        console.log(check,d);             

    });

Here's the first approach:

 var svg = d3.select("body").append("svg").attr("width", 400).attr("height", 300); var data = [1,2]; var nodeEnter = svg.selectAll(null).data(data).enter(); nodeEnter.append('foreignObject').attr('width', '20').attr("x", (d,i) => i*50+50).attr("y", 1).attr('height', '20').append('xhtml:input').attr('type', 'checkbox') // An on click function for the checkboxes.on("click",function(d){ var check = this.checked; console.log(check,d); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>