单击按钮应检查 Google 表单上的单选输入

Question

问题

提交 Google 表单时收到错误 Looks like you have a question or two that still needs attention，因为它无法识别是否已选择按钮及其对应的值，因为其表单使用单选输入。

直播链接：https://s3.amazonaws.com/bsunproduction/auction/index.html

向下滚动到标题下方，查看按钮下方未设置样式的单选输入

寻找解决此问题的最佳方法：

• 看到我的按钮样式是我想要的样式，当我点击 .button__form 它应该 .prop(checked, true) 以检查表单上的 Google 无线电输入，ie 如果你点击 $10 按钮，它应该让收音机输入 $10 checked

• 或者，我应该将我的收音机输入设置为假按钮，但我不相信这条路线是解决此问题的正确方法

谷歌表单

<ul class="ss-choices" role="radiogroup" aria-label="Bids  "><li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="10" id="group_1455057699_1" role="radio" class="ss-q-radio" aria-label="10" required="" aria-required="true"></span>
<span class="ss-choice-label">10</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="25" id="group_1455057699_2" role="radio" class="ss-q-radio" aria-label="25" required="" aria-required="true"></span>
<span class="ss-choice-label">25</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="50" id="group_1455057699_3" role="radio" class="ss-q-radio" aria-label="50" required="" aria-required="true"></span>
<span class="ss-choice-label">50</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="100" id="group_1455057699_4" role="radio" class="ss-q-radio" aria-label="100" required="" aria-required="true"></span>
<span class="ss-choice-label">100</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="250" id="group_1455057699_5" role="radio" class="ss-q-radio" aria-label="250" required="" aria-required="true"></span>
<span class="ss-choice-label">250</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="500" id="group_1455057699_6" role="radio" class="ss-q-radio" aria-label="500" required="" aria-required="true"></span>
<span class="ss-choice-label">500</span>
</label></li></ul>

scripts.js

$(function(){

    /*-------------------------------------
    STEP ONE: PLACE BID
    --------------------------------------*/

  $.ajax({
   url: "https://sheetsu.com/apis/4a8eceba",
   method: "GET",
   dataType: "json"
 }).then(function(spreadsheet) {

  // Print current bid
  var currentBid = parseInt(spreadsheet.result.pop().Bids);
  $(".current__amount").html("$" +currentBid);

  var baseAmount = 0;
  var totalAmount = baseAmount;
  var counterArray = [];

  $('.button__form').on('click', function() {
    var value = $(this).val();

    if ($(this).hasClass('is--selected')) {
      $(this).removeClass('is--selected');
      $(".check--one").css("color", "#ccc");
      $(".new__amount").css("margin-left", 10 + "px");
      $(".bids__dollar").addClass("is--hidden");
      totalAmount = parseInt(totalAmount) - parseInt(value);

      counterArray.forEach(function (count) {
        if (count && count.reset) {
          count.reset();
        }
      });

      $('.total__amount').text("---");

    } else {
      $(".button__form").removeClass('is--selected');
      $(this).addClass('is--selected');
      $(".check--one").css("color", "#ffdc00");
      totalAmount = currentBid; // reset the totalAmount to base
      totalAmount = parseInt(totalAmount) + parseInt(value);
      $('.total__amount').html("$" + totalAmount);
      $(".bids__dollar").removeClass("is--hidden");
      $(".new__amount").css("margin-left", 0 + "px");

      // CountUp
      $(function() {
        var options = {
            useEasing : true,
            useGrouping : true,
            separator : '',
            decimal : '',
            prefix : '',
            suffix : ''
        };
        var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
        count.start();
        counterArray.push(count);
      });
    }
  });
});

  /*-------------------------------------
  STEP TWO: CONTACT FORM
  --------------------------------------*/

  // Has the form been filled up?
  function validate(){
    var invalids = $('input, select').filter(function(){
      return !this.value.trim();
    });

    // Get two dates
    var currentDate = new Date();
    var endDate = new Date("1/14/2016 17:00:00");

    // To turn milliseconds into days, divide the number by 86400000
    // To turn milliseconds into hours, divide the number by 3600000
    var remainingHours = ((endDate - currentDate) / 3600000).toFixed(2);

    if (invalids.length === 0 && remainingHours > 0) {
        // Enable button only if the form is filled, auction ongoing
        $(".button__submit").removeClass("is--disabled");
        $(".button__submit").addClass("is--active");
        $(".check--two").css("color", "#ffdc00");
    } else {
        $(".button__submit").removeClass("is--active");
        $(".button__submit").addClass("is--disabled");
        $(".check--two").css("color", "#ccc");
    }
  }

    // Validate form on keyup
    $('input').on('keyup', validate);
    $('select').on('change', validate);

  /*-------------------------------------
  SWEET ALERT
  --------------------------------------*/

  // You will only be able to click if form is filled, hence no if-statement
  $(".button__submit").on("click", function(){
      swal({
        title: "Thanks for bidding!",
        text: "You will be notified if you've placed the winning bid.",
        type: "success",
        confirmButtonColor: '#ffdc00',
      });
  });

    /*-------------------------------------
    STICKY NAVIGATION
    --------------------------------------*/

    var nav = $("nav");

    $(window).scroll(function(){
        if ($(this).scrollTop() > 630 ) {
            nav.addClass("is--sticky");
        } else {
            nav.removeClass("is--sticky");
        }
    });

    /*-------------------------------------
    AUDIO
    --------------------------------------*/

    var audio = document.getElementById("painter");

    $(".audio__play").click(function(){
    console.log("Clicked");
    if (audio.paused === true) {
     $(this).removeClass("fa-play");
     $(this).addClass("fa-pause");
     audio.play();
   } else {
     $(this).removeClass("fa-pause");
     $(this).addClass("fa-play");
     audio.pause();
   }
 });

    // Timestamp displays time elapsed
    audio.addEventListener("timeupdate", function() {
        var timeline = document.getElementById("audio__timestamp");
        var seconds = parseInt(audio.currentTime % 60);
        var minutes = parseInt((audio.currentTime / 60) % 60);

      // Progress bar
      var progressPercent = ((audio.currentTime / audio.duration) * 100).toFixed(2);
      $("progress").attr("value", progressPercent);

      if (seconds < 10) {
        timeline.innerHTML = minutes + ':0' + seconds;
      }
      else {
        timeline.innerHTML = minutes + ':' + seconds;
      }
    }, false);

    /*-------------------------------------
    EXPLAINER
    --------------------------------------*/

  $(".button__story").on("click", function(){
    $(window).scrollTop(650); // Still pretty hacky.

    if ($(".explainer__story").css('opacity') == 0) {
       $(".explainer__opener").animate({opacity: 0}, {duration: 600});
       $(".explainer__story").addClass("is--visible");
       $(".fa-long-arrow-left").removeClass("is--hidden");
       $(".fa-newspaper-o").addClass("is--hidden");
       $(".button__prompt").html("Back");
       $(".explainer__story").animate({opacity: 1}, {duration: 600});
    } else {
      $(".explainer__story").animate({opacity: 0}, {duration: 600});
      $(".explainer__story").removeClass("is--visible");
      $(".button__prompt").html("Read Story");
      $(".fa-newspaper-o").removeClass("is--hidden");
      $(".fa-long-arrow-left").addClass("is--hidden");
      $(".explainer__opener").animate({opacity: 1}, {duration: 600});
    }
  });
});

Answer 1

将您的 button__form 按钮更改为标签和...
添加对应于单选按钮id的for属性...
然后收音机将选择不需要脚本。

.button__form {
  background-color: gold;
  border: 1px solid black;
}

<label class="button__form button__one" value="10" for="group_1455057699_1">$10</label>
<label class="button__form button__two" value="25" for="group_1455057699_2">$25</label>
<label class="button__form button__three" value="50" for="group_1455057699_3">$50</label>
<label class="button__form button__four" value="100" for="group_1455057699_4">$100</label>
<label class="button__form button__five" value="250" for="group_1455057699_5">$250</label>
<label class="button__form button__six" value="500" for="group_1455057699_6">$500</label>

<br/><br/>

<ul class="ss-choices" role="radiogroup" aria-label="Bids  "><li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="10" id="group_1455057699_1" role="radio" class="ss-q-radio" aria-label="10" required="" aria-required="true"></span>
<span class="ss-choice-label">10</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="25" id="group_1455057699_2" role="radio" class="ss-q-radio" aria-label="25" required="" aria-required="true"></span>
<span class="ss-choice-label">25</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="50" id="group_1455057699_3" role="radio" class="ss-q-radio" aria-label="50" required="" aria-required="true"></span>
<span class="ss-choice-label">50</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="100" id="group_1455057699_4" role="radio" class="ss-q-radio" aria-label="100" required="" aria-required="true"></span>
<span class="ss-choice-label">100</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="250" id="group_1455057699_5" role="radio" class="ss-q-radio" aria-label="250" required="" aria-required="true"></span>
<span class="ss-choice-label">250</span>
</label></li> <li class="ss-choice-item"><label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="500" id="group_1455057699_6" role="radio" class="ss-q-radio" aria-label="500" required="" aria-required="true"></span>
<span class="ss-choice-label">500</span>
</label></li></ul>