首页 > 解决方案 > HTML 表单单选按钮和复选框

问题描述

我想创建一个表单,如果选择了单选按钮,则会打开一些与之关联的复选框,并且用户必须在提交表单之前选择该单选按钮下的至少一个复选框。例如参考codepen:https ://codepen.io/anon/pen/zJKPRK 。这是基于我看到的狗/猫教程。

在这里,项目传播用于使所有子项目成为必需:

var FormStuff = {

init: function() {
    this.applyConditionalRequired();
    this.bindUIActions();
  },

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
  },


  applyConditionalRequired: function() {


$(".require-if-active").each(function() {
  var el = $(this);
  if ($(el.data("require-pair")).is(":checked")) {

    el.prop("required", true);
  } else {
    el.prop("required", false);
  }
});
},   
};
FormStuff.init();

这里至少需要选择 1 个单选按钮,如果选择了 ClassB 或 ClassC,我希望用户应该在该特定类下选择至少一个复选框。有什么建议么?

标签: javascriptjqueryhtml

解决方案


.length为您提供选择中元素的数量。$('input[type="checkbox"]').is(':checked').length > 0告诉您是否至少有 1 个复选框已被选中。只需根据需要将类添加到您的选择器。


推荐阅读