使用JS函數中的無線電值檢索JSON數據

Question

以前我收到了很棒的解決方案，我正在做這個小項目。 現在我想擴展一些，但我需要克服這個障礙。 工作地點：http://oceanmeasure.info

以前的帖子是：

HTML select value passed into Javascript var (then used to fetch JSON)

retrieve JSON data based on user selection/prompt

當前不工作代碼： https://jsfiddle.net/zt074c01/

主要的過程中，我很希望目前做的是學會如何將海洋價值的下拉框切換爲單選按鈕，而不是因爲它只有2個選項。以上我添加了一個小提琴鏈接，但下面我將只添加main.js文件，因爲那是我認爲錯誤的地方。

(function(){ 
//------Set variables 

var userOcean = getRadioVal(document.getElementById('dataForm'), 'oceanVal'); 
var userFish = document.getElementById("fishVal"); 
var buttonInfo = document.getElementById("getInfo"); 
var output = document.getElementById("oceanOutput"); 
var btnLicenseY = document.getElementById('licenseYes'); 
var btnLicenseN = document.getElementById('licenseNo'); 
var licenseOutput = document.getElementById("licenseOutput"); 

//------Start function on click 
buttonInfo.addEventListener('click', function() { 
var ocean = userOcean.options[userOcean.checked].value; 
var kind = userFish.options[userFish.selectedIndex].value; 
var fishImg = jsonObject.ocean_measure[ocean]['fish'][kind].image; 
output.innerHTML = "<h2>Fish On!</h2><div id=\"fishInfo\">"+ 
    "<img src='" +fishImg+ "' />" + 
    "<p>fish: "+jsonObject.ocean_measure[ocean]['fish'][kind].name+"</p>"+ 
    "<p>length: "+jsonObject.ocean_measure[ocean]['fish'][kind].length+"</p>"+ 
    "<p>closed: "+jsonObject.ocean_measure[ocean]['fish'][kind].closed+"</p>"+ 
    "<p>limit: "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+"</p>"+ 
    "<p>remarks: "+jsonObject.ocean_measure[ocean]['fish'][kind].remarks+"</p>"; 
    console.log(
    "<img src='" +fishImg+ "' />" + 
    "\n\nfish: "+jsonObject.ocean_measure[ocean]['fish'][kind].name+ 
    "\n\nlength: "+jsonObject.ocean_measure[ocean]['fish'][kind].length+ 
    "\n\nclosed: "+jsonObject.ocean_measure[ocean]['fish'][kind].closed+ 
    "\n\nlimit: "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+ 
    "\n\nremarks: "+jsonObject.ocean_measure[ocean]['fish'][kind].remarks+ 
"</div>" 
); 
}); 
//------end info function 
//------start license function 

btnLicenseY.addEventListener('click', function(){ 
licenseOutput.innerHTML = "<h3>Lets Fish!</h3>"+ "<p>You're all set go ahead and select which coast you'll be fishing, and your target species.</p>" 
}); 
//------end yes license function 
btnLicenseN.addEventListener('click', function(){ 
licenseOutput.innerHTML = "<h3>Uh Oh!</h3>"+ "<p>Let's make sure you get that taken care of before you hit the open waters, remember some piers &amp charters require you to pay for access and a one day fishing license may be included in that access, be sure to call and find out ahead of time.</p>"+ 
"<h4>Get my License</h4>"+"<p>If you'd rather not risk it go ahead and visit <a href=http://myfwc.com/license/recreational/saltwater-fishing/ target=_blank>Here</a> to purchase the best license for you!</p>" 
}); 
//------end no license function 

//--------RADIO Function 

function getRadioVal(form, name) { 
    var val; 
    // get list of radio buttons with specified name 
    var radios = form.elements[name]; 

    // loop through list of radio buttons 
    for (var i=0, len=radios.length; i<len; i++) { 
     if (radios[i].checked) { // radio checked? 
      val = radios[i].value; // if so, hold its value in val 
      break; // and break out of for loop 
     } 
    } 
    return val; // return value of checked radio or undefined if none checked 
} 


})(); 

Answer 1

HTML

<input type="radio" name="radioElement" id="radio1" value="option-a" checked> 
<input type="radio" name="radioElement" id="radio2" value="opption-b"> 

JS

$('input[name="radioElement"].checked').val();