如何将所有单选按钮值转换为Json并使用本地存储加载？

Question

＆＃13;

＆＃13;

$(document).ready(function() {

  $('#showme').click(function() {
    //validateNresult() ;
    exportResultJson();
  })


  $('.allrb').change(valueE);

});

function validateNresult() {

  var firstInvalidRowIndex = 0;
  $.each($("tbody tr"), function(i, e) {
    var hasInvalidInputs = $(this).find(".numFr, .numIr").filter(function() {
      return $.trim(this.value).length === 0;
    }).length > 0;

    if (hasInvalidInputs) {
      $(this).addClass("invalid");
      if (firstInvalidRowIndex <= 0) {
        firstInvalidRowIndex = i + 1;
      }
    } else {
      $(this).removeClass("invalid");
    }

  });

  if (firstInvalidRowIndex > 0) {
    $('html, body').animate({
      scrollTop: ($("#alertr1").offset().top)
    }, 1000);
  }
}



function valueE(e) {
  var newValue = e.target.value;
  var $radio = $(e.target);

  if ($radio.is('.Fr')) {
    $radio.closest('tr').find('.numFr').val(newValue);
  } else {
    $radio.closest('tr').find('.numIr').val(newValue);
  }
}


$(document).ready(function() {
  importResultJson();

});


function exportResultJson() {
  var fav, favs = [];
  $('.allrb').each(function() { // run through each of the checkboxes
    fav = {
      name: $(this).attr('name'),
      value: $(this).prop('checked')
    };
    favs.push(fav);
  });


  localStorage.setItem("favorites", JSON.stringify(favs));
  console.log(favs);
}

function importResultJson() {
  var favorites = JSON.parse(localStorage.getItem('favorites'));
  if (!favorites.length) {
    return
  };
  console.debug(favorites);

  for (var i = 0; i < favorites.length; i++) {
    //console.debug(favorites[i].value == 'on');
    //$('#' + favorites[i].id ).prop('checked', favorites[i].value);
    $('[name=' + favorites[i].name + ']').prop('checked', favorites[i].value);

  }

}

function page_onLoad() {
  if (Moodle_getParam("attempt_id")) {
    Moodle_Retrieve_QuizResult(Moodle_getParam("attempt_id"), function(data) {
      importResultJson();
    });
  }

}

＆＃13;

input[type=number] {
  width: 25px;
  text-align: center;
}

.invalid {
  outline: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-responsive" id="tab">
  <tr id="alertr1" name="v">
    <td width="200px" id="text">content 1</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr1" class="numFr" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr1" class="numIr" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr2" name="v">
    <td width="200px" id="text">content 2</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr2" class="numFr" id="numFr2" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr2" class="numIr" id="numIr2" disabled>
    </td>
  </tr>

  <tr id="alertr3" name="v">
    <td width="200px" id="text">content 3</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr3" class="numFr" id="numFr3" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr3" class="numIr" id="numIr3" disabled>
    </td>
  </tr>

  <tr id="alertr4" name="v">
    <td width="200px" id="text">content 4</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr4" class="numFr" id="numFr4" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr4" class="numIr" id="numIr4" disabled>
    </td>
  </tr>

  <tr id="alertr5" name="v">
    <td width="200px" id="text">content 5</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr5" class="numFr" id="numFr5" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr5" class="numIr" id="numIr5" disabled>
    </td>
  </tr>
  <tr id="alertr6" name="v">
    <td width="200px" id="text">content 6</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr6" class="numFr" id="numFr6" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr6" class="numIr" id="numIr6" disabled>
    </td>
  </tr>
  <tr id="alertr7" name="v">
    <td width="200px" id="text">content 7</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr7" class="numFr" id="numFr7" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr7" class="numIr" id="numIr7" disabled>
    </td>
  </tr>
  <tr id="alertr8" name="v">
    <td width="200px" id="text">content 8</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr8" class="numFr" id="numFr8" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr8" class="numIr" id="numIr8" disabled>
    </td>
  </tr>
  <tr id="alertr9" name="v">
    <td width="200px" id="text">content 9</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr9" class="numFr" id="numFr9" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr9" class="numIr" id="numIr9" disabled>
    </td>
  </tr>

</table>


<button class="btn btn-primary" id="showme" type="button">View Result</button>
<p style="float:right;position:absolute;margin-left:700px;margin-top:10px;" id="alertmessage"></p>

＆＃13;

＆＃13;

＆＃13;

我已经成功使用localstorage setItem将所有单选按钮值存储到Json中，但我不知道为什么，它只调用我的商店价值的一半。当你看到我的小提琴时，你可能会理解。 首先，您必须为单选框选择一些值，然后单击按钮并再次刷新页面。

刷新后。我可以知道问题出在哪里吗？感谢。

Here is the fiddle.

Answer 1

问题是你只是将单选按钮的名称放入本地存储元素中。但是组中的所有按钮都具有相同的名称，并且您无法区分要存储的组中的哪个按钮。

您应该只存储已选中按钮的值。然后在恢复时，检查每个组中的特定按钮。

$(document).ready(function() {

  $('#showme').click(function() {
    //validateNresult() ;
    exportResultJson();
  })


  $('.allrb').change(valueE);

});

$(document).ready(function() {
  importResultJson();

});

function exportResultJson() {
  var fav, favs = [];
  $('.allrb:checked').each(function() { // run through each of the checkboxes
    fav = {
      name: $(this).attr('name'),
      value: $(this).val()
    };
    favs.push(fav);
  });

  localStorage.setItem("favorites", JSON.stringify(favs));
  console.log(favs);
}

function importResultJson() {
  var favorites = JSON.parse(localStorage.getItem('favorites'));
  if (!favorites.length) {
    return
  };
  console.debug(favorites);

  for (var i = 0; i < favorites.length; i++) {
    //console.debug(favorites[i].value == 'on');
    //$('#' + favorites[i].id ).prop('checked', favorites[i].value);
    $('[name=' + favorites[i].name + '][value=' + favorites[i].value + ']').prop('checked', true);

  }

}

function valueE(e) {
  var newValue = e.target.value;
  var $radio = $(e.target);

  if ($radio.is('.Fr')) {
    $radio.closest('tr').find('.numFr').val(newValue);
  } else {
    $radio.closest('tr').find('.numIr').val(newValue);
  }
}

input[type=number] {
  width: 25px;
  text-align: center;
}

.invalid {
  outline: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-responsive" id="tab">
  <tr id="alertr1" name="v">
    <td width="200px" id="text">content 1</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr1" class="numFr" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr1" class="numIr" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr2" name="v">
    <td width="200px" id="text">content 2</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr2" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir2" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr2" class="numFr" id="numFr2" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr2" class="numIr" id="numIr2" disabled>
    </td>
  </tr>

  <tr id="alertr3" name="v">
    <td width="200px" id="text">content 3</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr3" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir3" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr3" class="numFr" id="numFr3" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr3" class="numIr" id="numIr3" disabled>
    </td>
  </tr>

  <tr id="alertr4" name="v">
    <td width="200px" id="text">content 4</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr4" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir4" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr4" class="numFr" id="numFr4" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr4" class="numIr" id="numIr4" disabled>
    </td>
  </tr>

  <tr id="alertr5" name="v">
    <td width="200px" id="text">content 5</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr5" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir5" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr5" class="numFr" id="numFr5" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr5" class="numIr" id="numIr5" disabled>
    </td>
  </tr>
  <tr id="alertr6" name="v">
    <td width="200px" id="text">content 6</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr6" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir6" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr6" class="numFr" id="numFr6" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr6" class="numIr" id="numIr6" disabled>
    </td>
  </tr>
  <tr id="alertr7" name="v">
    <td width="200px" id="text">content 7</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr7" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir7" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr7" class="numFr" id="numFr7" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr7" class="numIr" id="numIr7" disabled>
    </td>
  </tr>
  <tr id="alertr8" name="v">
    <td width="200px" id="text">content 8</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr8" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir8" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr8" class="numFr" id="numFr8" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr8" class="numIr" id="numIr8" disabled>
    </td>
  </tr>
  <tr id="alertr9" name="v">
    <td width="200px" id="text">content 9</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr9" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir9" class="allrb" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="number" name="numFr9" class="numFr" id="numFr9" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="number" name="numIr9" class="numIr" id="numIr9" disabled>
    </td>
  </tr>

</table>


<button class="btn btn-primary" id="showme" type="button">View Result</button>
<p style="float:right;position:absolute;margin-left:700px;margin-top:10px;" id="alertmessage"></p>

jsfiddle demo