0

在将数据发送到表单发送脚本之前，我需要验证是否至少选中了一个复选框。这就是我到目前为止所拥有的（验证所有字段，复选框一个在底部）

$('form#ajax_form .submit').click(function () {
    $('#ajax_form .error').hide(); //if error visibile, hide on new click
    var name = $('input#name').val();
    if (name == "" || name == " " || name == "Name") {
        $('input#name').focus().before('<div class="error">Hey, what´s your name...?</div>');
        return false;
    }
    var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    var email = $('input#email').val();
    if (email == "" || email == " ") {
        $('input#email').focus().before('<div class="error">Psssst. You missed one...</div>');
        return false;
    } else if (!email_test.test(email)) {
        $('input#email').select().before('<div class="error">Please recheck your email</div>');
        return false;
    }
    var message = $('#message').val();
    if (message == "" || message == " " || message == "Message") {
        $('#message').focus().fadeIn('slow').before('<div class="error">Remember your message!</div>');
        return false;
    }
    if ($("[name=Field]:checked").length > 0) {
        $('#services1').focus().after('<div class="error">Choose at least one please.</div>');
        return false;
    }
    var company = $('input#company').val();
    $.post(rootUrl + '/wp-admin/admin-ajax.php', {
        action: "two2_send_contact_form",
        email: email,
        name: name,
        message: message,
        company: company
    }, function (data) {
        $('form#ajax_form').slideUp('fast').before('<div id="success"></div>');
        $('#success').html(data).slideDown(9000);
    });

和复选框。

 <div style="display:inline;">
    <span>
      <label class="choice" for="Field1" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field1" name="Field[]" type="checkbox" class="field checkbox" value="Web Design" style="width:0px;">Web Design    
 </label>
    </span>
    <span>
      <label class="choice" for="Field2" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field2" name="Field[]" type="checkbox" class="field checkbox" value="Graphic Design" style="width:0px;">Graphic Design
</label>
    </span>
    <span>
      <label class="choice" for="Field3" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field3" name="Field[]" class="field checkbox" type="checkbox" value="Illustration" style="width:0px;">Illustration
 </label>
    </span>
    <span>
      <label class="choice" for="Field4" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field4" name="Field[]" type="checkbox" class="field checkbox" value="Identity Dev/Branding" style="width:0px;">Identity Dev/Branding
</label>
    </span>
    <br>
    <span>
      <label class="choice" for="Field1_3" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field5" name="Field[]" class="field checkbox" type="checkbox" value="Identity Dev/Branding" style="width:0px;">Web App Development
</label>
    </span>
    <span>
      <label class="choice" for="Field1_4" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field6" name="Field[]" class="field checkbox" type="checkbox" value="CGI" style="width:0px;">CGI
</label>
    </span>
    <span>
      <label class="choice" for="Field1_5" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field7" name="Field[]" class="field checkbox" type="checkbox" value="VFX" style="width:0px;">VFX
</label>
    </span>
    <span>
      <label class="choice" for="Field1_6" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field8" name="Field[]" class="field checkbox" type="checkbox" value="Video Production" style="width:0px;">Video Production 
 </label>
    </span>
    <span>
      <label class="choice" for="Field1_7" style="display:inline;margin-left:0px;margin-right:5px;">
        <input id="Field9" name="Field[]" class="field checkbox" type="checkbox" value="Motion Project" style="width:0px;">Motion Project
</label>
    </span>
  </div>
4

4 回答 4

1 
$('input[type="checkbox"]:is("checked")').length > 0

至少有一个复选框被选中

使用 jquery > 1.7 你可以调用

$('input:checked').length
于 2012-08-02T02:44:51.783 回答
0

改变：

if ($("[name=Field]:checked").length > 0) {

到：

if ($("[name='Field[]']:checked").length > 0) {

您所有的复选框的名称属性中都有方括号，name="Field[]"但您试图选择没有方括号的它们作为name=Field.

于 2012-08-02T02:47:47.477 回答
0

这取决于您希望如何实现这一目标。如果您只想确保选中所有组中的至少一个复选框，那么这应该足够了：

if ($('input[type=checkbox]:checked').length) {
   // at least one is checked do something
}

如果您想检查每组是否至少检查一个，则稍微复杂一些。这是我不久前为回答另一个问题而创建的小提琴，可能会有所帮助：http: //jsfiddle.net/elclanrs/GFCKA/

无论如何，当您使用更多验证元素和输入时，我建议您看看这个插件，它也可以帮助您处理其他事情。

于 2012-08-02T02:48:48.313 回答
0

对于那些不使用 jQuery 的人：

const form = document.getElementById('ajax_form');
const valid = ajax_form.querySelectorAll('input[type="checkbox"]:checked').length;

if (valid > 0) {
  // code block here
}

否则，请参阅此答案。

于 2018-10-01T20:04:29.797 回答