Question

我有2个radio按钮。一个单选按钮有3个子级别的单选按钮。例如：

    <input type="radio"  name="catagory" />
                  <label class="" for="">A</label>
  <input type="radio" class="btn-redio" name="catagory" />
                  <label class="" for="">B</label>

一旦我取消单选按钮B，我将获得3sub级别的单选按钮。我想验证如果用户点击B然后需要检查是否检查了任何子无线电但是。

子级意味着：如果单击按钮B，那么JS

将只显示另一个3radio按钮

由于

AZ

Answer 1

如果我理解正确，那就是你的情况：

<input type="radio" name="parent_radio1" value="..." />
<input type="radio" name="sub_radio1_1" value="..." />
<input type="radio" name="sub_radio1_2" value="..." />
<input type="radio" name="sub_radio1_3" value="..." />

<input type="radio" name="parent_radio2" value="..." />
<input type="radio" name="sub_radio2_1" value="..." />
<input type="radio" name="sub_radio2_2" value="..." />
<input type="radio" name="sub_radio2_3" value="..." />

如果是这种情况，你可以使用这样的东西（未经测试）：

var form = $('#someForm');
form.submit(function(event){
  var parent_radios = $('input[type=radio][name^="parent_radio"]');
  parent_radios.each(function(){
    var parent = $(this);

    if (parent.prop('checked') !== true) return; // Parent not selected, no validation needed

    var child_selector = parent.attr('name').replace('parent_radio', '');
    var childs = $('input[name^="sub_radio' + child_selector + '_"]:checked'); // Select only the selected ones

    if (childs.length == 0) {
      event.preventDefault(); // No sub radio has been selected for this parent, cancel submit
      // Do some other stuff here like show error message
    }
  });

});

使用jquery插件进行子单选按钮验证

1 个答案: