檢查復選框是否被選中

Question

我的 d3 樹中有復選框。 我的代碼如下。

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

從這段代碼中，我可以在單擊復選框時捕獲數據。 但是有了這個我想知道復選框是否被選中。 我怎樣才能做到這一點？

Answer 1

在點擊 function 可以訪問被點擊的節點this ，看看它是否被this.checked

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

或者，您可以使用 d3 來實現與d3.select(this).property("checked"); 當您使用 d3v5 或更早版本時，您還可以訪問單擊的節點，如下所示：

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

    });

這是第一種方法：

 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>