Question

我的表单中包含两个radio复选框列表。

我需要验证检查，在任一列表中选中一个复选框。举例说明：

   <form>
    <input type="radio" name="1">
    <input type="radio" name="1">

    <input type="radio" name="2">
    <input type="radio" name="2">

    <button type="submit"></button>
    </form>

因此，当表单提交时，需要检查“name1”或“name2”或两者中的复选框。如果没有，它不应该让请求通过，并给出一条错误消息：“这是必需的”。我尝试使用以下代码在Jquery中执行此操作：

$("#submit").on("click",function(){
      if ($("input[name*='name1']:checked") || $("input[name*='name2']:checked")) {
        $("form").submit(function(e){
                e.preventDefault();
            });

        $('#segmentError').toggle();

        if($("#Error").is(':visible')) {
          $("html, body").animate({scrollTop: $("#scrollHere").offset().top});
        }
      }
      return true;
    });

然而，现在它不会让请求通过任何方式。我对JQuery不太满意，所以我希望你们中的一个可以帮我解决这个问题。

Answer 1

要解决此表单的submit事件的挂钩并检查:checked单选按钮的长度。然后，如果需要，您可以在活动上致电preventDefault()以停止提交：

$("form").on('submit', function(e) {
    if (!$('input[name="name1"]:checked').length && !$('input[name="name2"]:checked').length) {
        e.preventDefault();
        $('#segmentError').toggle();
        $("html, body").animate({
            scrollTop: $("#scrollHere").offset().top
        });
    }
});

Answer 2

我的代码段中有很多错误。

您正在使用#submit，但提交按钮没有设置ID
您在javascript中使用了name ='name1'，但HTML中的名称是name =“1”（name1 vs 1）。所以他们不匹配。

这是一个示例JSFiddle，向您展示如何检查是否选中了每对复选框。

https://jsfiddle.net/bwahhpnd/

基本上你可以使用：

$("input[name='1']:checked").length

查看是否检查了任何输入（如果长度为0则未选中）。

Answer 3

＆＃13;

$('button[type="submit"]').on('click', function(event) {
  event.preventDefault();
  if($('input[type="radio"]:checked').val()) {
    $('form').submit();
  } else {
    $('.error-container').text('This is required');
  }
});

＆＃13;

<p class="error-container"></p>
<form>
  <input type="radio" name="1">
  <input type="radio" name="1">
  <input type="radio" name="2">
  <input type="radio" name="2">
  <button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

＆＃13;

Answer 4

四件事：

您的选择器有错误，它正在寻找像＆＃34; name1＆＃34;而不是＆＃34; 1＆＃34;：$("input[name*='1']:checked").length > 0 || $("input[name*='2']:checked")).length > 0之类的名称另外，您需要检查.length检查中抓取的元素数量

另一个是你的提交按钮上没有id="submit"因此没有绑定点击事件。

最后，您需要先绑定阻止默认值：

$("form").submit(function(e){
                e.preventDefault();
            });

$("#submit").on("click",function(){
console.log("clicky");
console.log($("input[name*='1']:checked"));
      if ($("input[name*='1']:checked").length > 0 || $("input[name*='2']:checked").length > 0) {
      console.log('found checked');

        $('#segmentError').toggle();

        if($("#Error").is(':visible')) {
          $("html, body").animate({scrollTop: $("#scrollHere").offset().top});
        }
      }
      return true;
    });

这是一个JSFiddle：https://jsfiddle.net/msLrc2dm/1/

Answer 5

正如其他答案所说......

修复并将其放入工作小提琴中

$("input[name='name1']").is(':checked')

使用“.is（'：checked'）来测试是否选中

https://jsfiddle.net/zjhtye8c/2/

Answer 6

查看代码后，我发现需要更新一些问题才能使其正常工作：

<强> 1。将id分配给提交按钮，以便稍后在jQuery中引用它：

<button id="submit" type="submit"></button>

<强> 2。更新if子句，如下所示：

if ( $("input[name='1']:checked").val() && $("input[name='2']:checked").val() )

工作代码段

$("#submit").on("click", function() {

  if ($("input[name='1']:checked").val() && $("input[name='2']:checked").val()) {
    alert("input checked in list 1 and input checked in list 2");
  } else {
    alert("some checked radio buttons are missing")
  }

  return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="radio" name="1">
  <input type="radio" name="1">

  <input type="radio" name="2">
  <input type="radio" name="2">

  <button id="submit" type="submit"></button>
</form>

Jquery，如果列表中选中了两个复选框之一。

6 个答案:

工作代码段