Pat Pat - 5 months ago 68
HTML Question

d3.js event when two radio buttons selected

I have this sample code, where data shown changes as the radio button selection changes:

http://bl.ocks.org/juan-cb/1984c7f2b446fffeedde

I would like to insert two sets of radio buttons instead of one, so I added these lines to code:

<form>
<label><input type="radio" name="region" id="region" value="North" checked> North</label>
<label><input type="radio" name="region" id="region" value="South"> South</label>
<label><input type="radio" name="region" id="region" value="East"> East</label>
<label><input type="radio" name="region" id="region" value="West"> West</label>
</form>

<form>
<label><input type="radio" name="dataset" id="dataset" value="2009" checked> 2009</label>
<label><input type="radio" name="dataset" id="dataset" value="2010"> 2010</label>
<label><input type="radio" name="dataset" id="dataset" value="2011"> 2011</label>
<label><input type="radio" name="dataset" id="dataset" value="2012"> 2012</label>
<label><input type="radio" name="dataset" id="dataset" value="2013"> 2013</label>
<label><input type="radio" name="dataset" id="dataset" value="2014"> 2014</label>
</form>


I would like to change the code so the event happen when two radio buttons are selected, like "North" AND "2010".

Problem is I don't know how do I get the selected values of both radio button forms in order to apply here:

d3.selectAll("input")
.on("change", selectDataset);

function selectDataset()
{
var value = this.value;
if (value == "total") && (value == "North")
{
change(datasetTotal);
}
(...)
}


For example.

Answer
var selectedRegion  = d3.select('input[name=region]:checked').attr('value');
var selectedDataset = d3.select('input[name=dataset]:checked').attr('value')

if (selectedDataset == "total") && (selectedRegion == "North") {
  ...
}