为啥 jQuery 看不到已自动选中的复选框？

Posted 2023-05-09

【中文标题】为啥 jQuery 看不到已自动选中的复选框？

【英文标题】：Why does jQuery not see a checkbox has been auto checked?为什么 jQuery 看不到已自动选中的复选框？

【发布时间】：2018-12-09 06:49:33

【问题描述】：

我有一些 jQuery 检查以查看人类何时单击检查按钮，但如果页面加载时标记为已检查的按钮，则 jQuery 不起作用。

    $ (function()
        var requiredCheckboxes = $('.options :checkbox[required]');
        requiredCheckboxes.change(function()
            if(requiredCheckboxes.is(':checked')) 
                requiredCheckboxes.removeAttr('required');
             else 
                requiredCheckboxes.attr('required', 'required');
            
        );
    );

我需要做的是，如果复选框已被选中，它会删除所需的属性。为什么将变量发布到页面并且 php 在输入中添加了 checked="checked" 时它不起作用？

谢谢！

【问题讨论】：

我应该澄清一下，这是为了确保在验证期间选中其中一个复选框。

我需要类似 requiredCheckboxes.is(':checked') ||这个位检查是否已经检查过？

【参考方案1】：

您必须使用this 作为选择器来检查单击的复选框是否被选中。 this 指的是被点击的复选框。您可以使用prop()添加和删除required

var requiredCheckboxes = $('.options');

requiredCheckboxes.change(function() 
  if ($(this).is(':checked')) 
    $(this).prop('required', false);
   else 
    $(this).prop('required', true);
  
);

input:required 
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>

---

更新：您可以为所需的复选框使用一个类，并使用prop() 添加和删除required 属性。

var requiredCheckboxes = $('.required-options')

//On page Loads
if (requiredCheckboxes.is(':checked')) 
  requiredCheckboxes.prop('required', false);
 else 
  requiredCheckboxes.prop('required', true);



//Event listener
requiredCheckboxes.change(function() 
  if (requiredCheckboxes.is(':checked')) 
    requiredCheckboxes.prop('required', false);
   else 
    requiredCheckboxes.prop('required', true);
  
);

input:required 
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='required-options' type="checkbox" required checked>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>

【讨论】：

我明白你的意思，但这只会从复选框中删除所需的内容。我需要从所有复选框中删除。

这个想法是只需要一个复选框。

这在没有选中任何框的情况下有效，但是，当页面加载时已经选中了一个框，jQuery 没有看到该框被选中并且不会删除所需的属性。

@EricTheRed 在页面加载时，您必须检查复选框是否被选中并执行该过程。我更新了代码

您可能需要将这些代码放在函数上以消除重复。

【参考方案2】：

html：

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

js:

$("document").ready(function()
$('body').find('input:checkbox').prop('checked', "checked");
);

jsfiddle