当使用Javascript选中复选框时，如何从JSON文件获取数据？

我是javascript的初学者，我正在尝试构建一个小的flashcard游戏，允许用户在单击复选框时选择不同的flashcard库，我在实现此功能时遇到了一些困难。我想要我的代码做的是更改当有人单击他们选择的复选框时显示的数据集

以下是复选框和抽认卡的图片：

这是复选框的HTML代码：

<div id="flashcard_sets">
    <div id="card_group">
        <h3><u>Choose Flashcard Set</u></h3>
        <input type="checkbox" id="question_words" name="Question Words" value="Question Words" class="vocab">Question Words
        <input type="checkbox" id="verbs" name="Verbs" value="Verbs" class="vocab">Verbs
        <input type="checkbox" id="nouns" name="Nouns" value="Nouns" class="vocab">Nouns
    </div>
</div>

这是显示flashcard的javascript函数：

var jsonUrl = "questionsAndAnswersItalian.json";
var cardIndex = 0;
var qs;
var numCards;
var maxIndex;
var isFlipped = 0;

function displayCard() {
    $("#card").fadeOut(400,function(){
        colorIndex = getRandomInteger(0,3);
        $("#card").addClass(colorClasses[colorIndex])
        isFlipped = 0;
        var newHtml = "<h2>Question Words</h2>";
        var chosen_one = $("#card_group input[type=checkbox]:checked")
        if(chosen_one){
            var selection = chosen_one.attr("name");
            newHtml += qs["selection"][cardIndex]["q"];
        }else{
            newHtml += qs["Question Words"][cardIndex]["q"];
        }
        document.getElementById("question").innerHTML = newHtml;
    }).fadeIn(400);
}

var jsonUrl = "questionsAndAnswersItalian.json";
var cardIndex = 0;
var qs;
var numCards;
var maxIndex;
var isFlipped = 0;

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        var chosen_one = $("#card_group input[type=checkbox]:checked")
        if(chosen_one){
            var selection = chosen_one.attr("name");
            numCards = qs["selection"].length;
        }else{
            numCards = qs["Question Words"].length;
        }
        maxIndex = numCards-1;
        displayCard();
    });
}

我知道我肯定做错了什么，我试过几种解决方法，但现在我真的不知道该怎么做才能让它工作。如果有人能在这方面提供一些帮助或建议，我将不胜感激

谢谢

链接到无法工作的完整代码：

链接到原始代码，而不使用您编写的代码，并在HTML文件中嵌入javascript函数。您可以查看以下内容，了解我想对代码做什么：

这条线路肯定会有问题

document.getElementsByTagName

返回一个元素数组，由于数组没有选中的

属性，此语句的计算结果将为未定义。因为undefined具有错误的真值，所以if语句中的任何内容都不会执行

现在，这并不意味着您不能自己搜索
input
元素数组来找到复选框。您必须自己执行for循环以选中这些框：

var chosen_one;
for (var i=0; i < document.getElementsByTagName("input").length; i++){
    var box = document.getElementsByTagName("input")[i];
    if (box.checked) {
        chosen_one = changeCardset();
        numCards = qs["chosen_one"].length;
    }
}
if (!chosen_one) numCards = qs["Question Words"].length;

var选择一个；
对于（var i=0；i

您还必须更改
changeCardset
函数，以使用类似的for循环来查找选中的框（如果有）。
这里出错的关键部分是

document.getElementsByTagName("input")

正在返回节点列表。为了查看此列表的任何参数，需要对其进行迭代。更合适的方法是寻找选中的一个

var chosen_one = $("#card_group input[type=checkbox]:checked");

但是，这里的问题是最多可以检查3个。解决此问题将解决代码中的问题。
首先，您希望使用单选按钮，因为您只希望选择一个

所以我稍微重写了一下，让你走上正确的道路

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        changeCard("Question Words");
    });
}

$('.vocab').change(function () {
  var chosen_one = $(this).val();
  changeCard(chosen_one);
});

var changeCard = function(chosen_one) {
  $("#card").fadeOut(400,function(){
      isFlipped = 0;
      var newHtml = qs[chosen_one][cardIndex]["q"];
      maxIndex = qs[chosen_one].length;
      $('#questionTitle').html(chosen_one);
      $('#question').html(newHtml);
      console.log(maxIndex);
  }).fadeIn(400);
};

HTML:


选择抽认卡集
疑问词
动词
名词

普朗克：
我试过你说的，但没用。我在上面输入了编辑过的代码，这样你就可以看看我做了什么。你知道我哪里会出错吗？我试了你的建议，但没有成功。您还有其他建议或提示吗？@jamal-这在您的代码中会出现多次。您是否更改了所有事件？我对所有事件进行了更改，但现在我在控制台中遇到了以下错误：Uncaught TypeError:无法读取未定义的属性'length'，引用这行numCards=qs[“selection”]。length；init（）函数。我也实现了上面的更改，可能我没有正确地执行。你能看看我编辑的代码吗？感谢you@Jamaal-“selection”是一个静态字符串，您希望在其中选择变量。尝试
qs[selection].length（无引号）。是否需要复选框（或者单选按钮更好）？也就是说，您想要多种类型的问题，还是只想要一种类型的问题？它们是单选按钮并不重要，只要用户选择框时显示相应的问题即可。但您想要全部三种类型的问题都被选中吗？因为从你的问题来看，你似乎不知道。在这种情况下，您应该使用radio按钮。我只希望选择一组。将复选框更改为单选按钮可以解决我的问题吗？@jzm不，我在尝试将其放入代码时仍然遇到一些问题。我认为问题在于displayCard（）函数已更改为changeCard（selected_one），它现在接受了一个参数，而我以前的函数没有使用这个参数…..我看到你在Plunker上写的东西是有效的，但我在代码中实现它时遇到了一些问题。是否可以重新写入changeCard（Selected_one）函数，使该函数不带任何参数？当然可以，但它如何知道选择了什么？默认为
changeCard（“问题词”）。我更改了你的代码，因为它很乱$（.vocab）.change（）侦听单选按钮上的更改事件，然后获取所选单选按钮的值，并将其发送到changeCard（）当我选择单选按钮时，我的代码仍然没有更改，我不太确定原因。我想我必须重新检查我的整个代码。与放入init（）相比，您是否认为have可以防止发生更改；在javascript文件中？是的。如果您使用jquery，请不要使用HTML javascript事件标记。非常感谢您的帮助。我将尝试摆弄我的代码，并尝试进行一些修改以使其正常工作。如果我不能在接下来的几天内让我的代码正常工作，你能看看我的源代码吗？
var chosen_one = $("#card_group input[type=checkbox]:checked");

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        changeCard("Question Words");
    });
}

$('.vocab').change(function () {
  var chosen_one = $(this).val();
  changeCard(chosen_one);
});

var changeCard = function(chosen_one) {
  $("#card").fadeOut(400,function(){
      isFlipped = 0;
      var newHtml = qs[chosen_one][cardIndex]["q"];
      maxIndex = qs[chosen_one].length;
      $('#questionTitle').html(chosen_one);
      $('#question').html(newHtml);
      console.log(maxIndex);
  }).fadeIn(400);
};

<div id="card">
  <h2 id="questionTitle"></h2>
  <div id="question"></div>
</div>

<div id="flashcard_sets">
<div id="card_group">
    <h3><u>Choose Flashcard Set</u></h3>
    <label for="question_words"><input type="radio" id="question_words" name="vocab" value="Question Words" class="vocab" checked>Question Words</label>
    <label for="verbs"><input type="radio" id="verbs" name="vocab" value="Verbs" class="vocab">Verbs</label>
    <label for="nouns"><input type="radio" id="nouns" name="vocab" value="Nouns" class="vocab">Nouns</label>
</div>