Toggle between selected radio button using D3

Question

Consider I have 4 radio buttons as in html

<form id="form">
    <input type="radio" name="stack" value="north">north<br>
    <input type="radio" name="stack" value="east" >east<br>
    <input type="radio" name="stack" value="west">west<br>
    <input type="radio" name="stack" value="south">south
</form>

How do I get the value of selected radio button and assign onto a global variable, on selection , using D3.js ,such a way I can toggle between selections?

Answer 1

If those are the only inputs you have, you can do:

d3.selectAll("input").on("change", function(){
    console.log(this.value)
});

To select only that specific group of radio buttons, use their name:

d3.selectAll("input[name='stack']").on("change", function(){
    console.log(this.value)
});

To assign it to a global (declaring without var):

d3.selectAll("input[name='stack']").on("change", function(){
    globalVariable = this.value;
});

Here is the demo:

d3.selectAll(("input[name='stack']")).on("change", function(){
console.log(this.value)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<form id="form">
    <input type="radio" name="stack" value="north">north<br>
    <input type="radio" name="stack" value="east" >east<br>
    <input type="radio" name="stack" value="west">west<br>
    <input type="radio" name="stack" value="south">south
</form>