在 JavaScript 中将单选按钮替换为“selected”

Replacing radio button with "selected" in JavaScript

本文关键字：selected 替换 单选按钮 JavaScript      更新时间：2023-09-26

我正在尝试制作一个由jQuery（也许还有JSON）提供支持的测验，并将值存储在数据库中。到目前为止，它工作正常，但我想隐藏单选按钮（CSS：显示：无）并使每个问题看起来像一个按钮（比一个小单选按钮更容易选择）。

但是，当我这样做时，以下 JavaScript 不起作用，并且测验没有评分。

var imgpath = "/images/sections/test/";
var jsonpath = "/2b/inc/pages/quiz-php/json/";
var jsonfile = "key";
$(document).ready(function(){
 //Make sure radio buttons are not disabled or checked (helpful when refreshing)
 $("input[type='radio']").attr("disabled", false);
 $("input[type='radio']").attr("checked", false);
 $(".submit").click(function(e){
    e.preventDefault();
    //Check the quiz results
    checkQuiz();
});
//Build the json filename
jsonfile = $("#quiz").attr("rel")+".php";
});
//Load json file
function getData(update){
 $.getJSON(jsonpath+jsonfile, function(json){
 //Execute the callback
 update(json);
 }).error(function(){alert("error");});
}
function checkQuiz(){
 $(".submit").remove();
 getData(function(data){
    var ans = data.key;
    var result = {};
    $(".Question").each(function(){
        //Get the question id
        var _q = $(this).attr("id");
        //Get the selected answer class
        var _a = $("#"+_q+" input:checked").closest("li").attr("class");
        //Add the values to the result object
        result[_q] = _a;
        //Compare the selected answer with the correct answer
        if(ans[_q]==_a){
            $(this).addClass("correct");
        }else{
            $(this).addClass("wrong");
        }
    });
    //Build the feedback
    var fdbck = "You got "+$(".correct").length+" out of "+$(".Question").length+" correct.  "
    if($(".correct").length==0){
        fdbck += "Better luck next time.";
    }else if($(".correct").length>$(".Question").length/2){
        fdbck += "Good job!";
    }else{
        fdbck += "Not bad.";
    }
    $(".feedback").text(fdbck);
    $(".feedback").show();
 });
}

所以我想知道除了单选按钮之外，是否有其他方法可以记录分数。我创建了一个JSFiddle @http://jsfiddle.net/9j7fz99w/6/来说明我如何使用jQuery和CSS来设置正确和错误答案的样式。有没有办法修改上面的代码，以根据它们的"选择"而不是单选按钮来类似地识别正确的问题？

只是一个使用 JS 问题的小例子 带对象的数组

var $quizEl = $("#quizEl");
var $submit = $("#submit");
var quiz = [
  {                 // obj
    "Q" : "What color is the Sun?",
    "A" : ["Red", "Black", "Yellow"],
    "C" : 2
  },{
    "Q" : "What color is an Elephant?",
    "A" : ["Gray", "Blue", "Yellow"],
    "C" : 0         // zero indexed! 
  },{
    "Q" : "What color is the Sea?",
    "A" : ["Fuchsia", "Blue", "Gold"],
    "C" : 1
  }
];
var qNum = quiz.length;
// FUNCTION THAT CREATES AND APPENDS AN `UL` TO `DIV #quizEl`
function generateQuestion( obj, idx ) {
  var html = "<h2>"+ obj.Q +"</h2><ul>";
  for (var i=0; i<obj.A.length; i++) {
    html += "<li>"+
      "<label>"+
      "<input type='radio' name='"+ idx +"' value='"+i+"'>"+
      obj.A[i] +"</label>"+
      "</li>";
  }
  $quizEl.append( html+"</ul>" );
}
// GENERATE ALL QUESTIONS:
for(var i=0; i<qNum; i++) {
  generateQuestion( quiz[i], i ); // quiz[i] is the {QAC} object
}
$quizEl.on("change", ":radio", function(){ // Record User choice (U property)
  quiz[this.name].U = this.value; // set 0,1,2 to the new U property {QACU}
});
$submit.on("click", function(e){
  e.preventDefault();
  
  console.log( quiz ); // To test how it looks
  
  // Check if user answered them all:
  for(var i=0; i<qNum;i++){
    if(!quiz[i].hasOwnProperty("U")){ // User did not answered if "U" property doesn't exists
      return alert("Please,'nanswer the question "+ (i+1) +":'n"+ quiz[i].Q );
    }else{ // Add classes...
      $("ul").eq(i).find(":checked").closest("li")
      .addClass( +quiz[i].U === quiz[i].C ? "correct":"wrong");
    }
  }
  // Finally colour them!
  $(".correct").css({background:"green"});
  $(".wrong").css({background:"red"});
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quizEl"></div>
<input id="submit" type="submit">

相关文章：