Javascript 用于复选框和文本框的引导jQuery html5复杂验证代码

我想实现jQuery验证代码，以确保用户至少选中一个复选框。选中该复选框后，用户需要在匹配的输入文本框中输入值

<form id="demo" class="m-t" role="form" method="post" action="register.php">
 <label class="checkbox-inline">
 <input type="checkbox" id="is_a1" name="is_a1" value="1">a1</label> 

 <label class="checkbox-inline">
 <input type="checkbox" id="is_a2" name="is_a2" value="1">a2</label>

 <label class="checkbox-inline">
 <input type="checkbox" id="is_a3" name="is_a3" value="1">a3</label>
 <input type="text" name="a1_input" id="a1_input" value="">
 <input type="text" name="a2_input" id="a2_input" value="">
 <input type="text" name="a3_input" id="a3_input" value="">
 <button type="submit" class="btn btn-default block full-width m-b">submit</button>

 </form>
 <script>
 $(document).ready(function () {
    $("#demo").submit(function(event) {
      if ($("#a1").is(':checked')){
          if ($("#a1_input).val().length > 0) {
              return true;
          }
          else {
             alert("a1_input is empty");
             return false;
          }
      }
      if ($("#a2").is(':checked')){
         if ($("#a2_input).val().length > 0) {
              return true;
          }
          else {
             alert("a2_input is empty");
             return false;
          }
      }
      if ($("#a3").is(':checked')){
          if ($("#a3_input).val().length > 0) {
              return true;
          }
          else {
             alert("a3_input is empty");
             return false;
          }
      } 
      alert("please check at least one check box");

    });

  });
 </script>

a1
a2
a3
提交
$（文档）.ready（函数（）{
$（“#演示”）.submit（函数（事件）{
如果（$（“#a1”）是（'：选中的'））{
如果（$（“#a1_输入）.val（）.length>0）{
返回true；
}
否则{
警报（“a1_输入为空”）；
返回false；
}
}
如果（$（“#a2”）。是（'：选中的'））{
if（$（“#a2_输入）.val（）.length>0）{
返回true；
}
否则{
警报（“a2_输入为空”）；
返回false；
}
}
如果（$（“#a3”）是（'：选中的'））{
如果（$（“#a3_输入）.val（）.length>0）{
返回true；
}
否则{
警报（“a3_输入为空”）；
返回false；
}
} 
警告（“请至少勾选一个复选框”）；
});
});

这是您的解决方案，目前我将标签id从

is_a1

更改为

a1

。工作演示：

---

只需遍历复选框，并选中

checked

属性：

$('#demo .btn').on('click', function () {
    var checked = [];
    $('#demo input[type="checkbox"]').each(function (idx, obj) {
        if ($(this).prop("checked") === true) {
            var parts = $(this).attr('name').split("_");
            checked.push(parts[1]);
        }
    });
    if (checked.length > 0) {
        $.each(checked, function (idx, val) {
            if ($('#' + val + '_input').val() === "") {
                alert(val + ' checked but no input');
            }
        });
    } else {
        alert('nothing checked');
    }
});

---

@CK8复杂验证代码是什么意思？？？当我选中a1并在第一个文本框中输入一些内容，然后单击“提交”按钮时，没有提交任何内容。这不是你的问题，你需要的是我的回答验证是纯客户端代码。在选中第一个复选框并输入一些内容后，我只需再次检查你的演示在第一个文本框中，我仍然收到字段为空的警报消息。请选中“代码工作”，谢谢。检查匹配的输入文本框并确保它不是空的，怎么样？

$('#demo .btn').on('click', function () {
    var checked = [];
    $('#demo input[type="checkbox"]').each(function (idx, obj) {
        if ($(this).prop("checked") === true) {
            var parts = $(this).attr('name').split("_");
            checked.push(parts[1]);
        }
    });
    if (checked.length > 0) {
        $.each(checked, function (idx, val) {
            if ($('#' + val + '_input').val() === "") {
                alert(val + ' checked but no input');
            }
        });
    } else {
        alert('nothing checked');
    }
});