Question

我有10个问题，每个问题有4个单选按钮作为选项。我想验证是否所有问题都选中了单选按钮。并在onclick上提交按钮调用javascript函数。

请帮我解决javascript功能。我可以使用2d元素来定位javascript函数中每个问题的每个单选按钮。请解决javascript问题。运行此javascript我只能使用1d数组来定位问题。

＆＃13;

function validateForm() {
    var radios = document.getElementsByClassName("surveyQuestions");
    var formValid = false;
    
    var i = 0;
    while (formValid == false && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;
    }
    
    if (formValid == false) alert("Must Check Option !!");
}

＆＃13;

<form class="forward">
        <div class="surveyQuestions">
            <label>2.Who is your Favorite Forward ? </label>
    <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
          <label class="form-check-label" for="exampleRadios1">
            Lionel Messi
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
          <label class="form-check-label" for="exampleRadios2">
           Cristiano Ronaldo
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
          <label class="form-check-label" for="exampleRadios3">
            Neymar Jr
            </label>
    </div>
            <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
          <label class="form-check-label" for="exampleRadios3">
            Mohammed Salah
            </label>
    </div>
        </div>
            </form>
        
        
        <form class="midfielder">
         <div class="surveyQuestions">
            <label>3.Who is your favourite Midfielder? </label>
    <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
          <label class="form-check-label" for="exampleRadios1">
            Toni Kroos
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
          <label class="form-check-label" for="exampleRadios2">
           Andreas Iniesta
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
          <label class="form-check-label" for="exampleRadios3">
            Kevin De Bruyne
            </label>
    </div>
            <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
          <label class="form-check-label" for="exampleRadios3">
            Paul Pogba
            </label>
    </div>
        </div>
        </form>
        
        <form class="defender">
         <div class="surveyQuestions">
            <label>4.Who is your Favorite Defender ? </label>
    <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
          <label class="form-check-label" for="exampleRadios1">
            Sergio Ramos
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
          <label class="form-check-label" for="exampleRadios2">
           Gerard Pique
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
          <label class="form-check-label" for="exampleRadios3">
            Leonardo Bonucci
            </label>
    </div>
            <div class="form-check">
          <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
          <label class="form-check-label" for="exampleRadios3">
            Thiago Silva
            </label>
    </div>
        </div>
            </form>

＆＃13;

Answer 1

您可以尝试类似

的内容

只需修改您的功能，如下所示

function validateForm() {
            var totalQue = document.getElementsByClassName("surveyQuestions").length;
            var selectedAns = document.querySelectorAll("input[type='radio']:checked").length;
            if(totalQue != selectedAns){
            alert("Must Check Option !!");
                return false;
            }
        }

这将为您提供所有选中的单选按钮。

Answer 2

也许您需要使用您的无线电课程。例如：

public class ConStockFilterFactory {

  @Factory
  public Query getFilter() {
    return new QueryWrapperFilter(NumericRangeQuery.newIntRange("stock", 0, Integer.MAX_VALUE, false, true));
  }

}

在此之后，您可以选择<input type="radio" class="checkthis group_01" id="group_01_item_01"> <input type="radio" class="checkthis group_01" id="group_01_item_02"> <input type="radio" class="checkthis group_01" id="group_01_item_03"> <input type="radio" class="checkthis group_01" id="group_01_item_04"> <input type="radio" class="checkthis group_02" id="group_02_item_01"> // ...and so on类的所有无线电，.checkthis类的组和带有ID的项目。

现在您可以使用jQuery查找从组中选择的内容，如下所示：

.group_01

<强>更新：

没有jQuery，只有原生JavaScript：

var object_array = $('.group_01').find(':checked');
if (object_array.length > 0) {
    // you have a selected element
} else {
    // there isn't selected element
}

if语句是相同的。

如何为许多单选按钮设置调用javascript函数？

2 个答案: