jQuery到Javascript添加必需属性

因此，我构建了以下jQuery代码，用于检查是否在#rtk5上触发了on change事件，然后删除或添加“required”属性

在jQuery中工作得非常完美：

// Make checkbox textboxes not required unless checked
$(document).ready(function() {
    $('#rtk5').change(function() {
        if ($('.rtk5ReqField').attr('required')) {
            $('.rtk5ReqField').removeAttr('required');
        }
        else {
            $('.rtk5ReqField').attr('required','required');
        }
    });
});

我想通过函数调用将其转换为JavaScript，但我似乎不知道如何正确地进行转换

错误：

TypeError:rtk5req.getAttribute不是函数

以下是我的尝试：

var rtk5req = document.getElementsByClassName('rtk5ReqField');
function rtk5Required() {
    rtk5req.addEventListener('change', (e) => {
        if (rtk5req.getAttribute('required')) {
            rtk5req.removeAttribute('required');
        } else {
            rtk5req.getAttribute('required', 'required');
        }
    });
}
rtk5req.addEventListener('change', rtk5Required());
document.addEventListener('DOMContentLoaded', rtk5Required);
rtk5Required();

更新代码：删除重复的更改调用

var rtk5req = document.getElementsByClassName('rtk5ReqField');
function rtk5Required() {
        if (rtk5req.getAttribute('required')) {
            rtk5req.removeAttribute('required');
        } else {
            rtk5req.getAttribute('required', 'required');
        }
}
rtk5req.addEventListener('change', rtk5Required());
document.addEventListener('DOMContentLoaded', rtk5Required);
rtk5Required();

更新代码#2：

// Make checkbox textboxes not required unless checked
$(document).ready(function() {
    $('#rtk5').change(function() {
        if ($('.rtk5ReqField').attr('required')) {
            $('.rtk5ReqField').removeAttr('required');
        }
        else {
            $('.rtk5ReqField').attr('required','required');
        }
    });
});

感谢大家的辛勤工作，有一个小问题我仍在经历，不得不做一些调整-当我取消选中复选框时，它不会删除放置在

rtk5Declaration

上的所需标记，它在jQuery中就是从中删除的

var rtk5_selection = document.getElementById('rtk5');

document.addEventListener('DOMContentLoaded', () => {
    rtk5_selection.addEventListener('change', () => {
        if (rtk5_selection.getAttribute('required')) {
            document.getElementById('rtk5Declaration').removeAttribute('required');
        } else {
            document.getElementById('rtk5Declaration').setAttribute('required', 'required');
        }
    });
});

---

非常感谢大家

由于您只有一个元素，因此应该使用它的ID而不是它的类，并避免由于

document.getElementsByClassName

返回伪元素数组而不是单个元素而导致的复杂性

注意：使用

setAttribute

更改属性的值，或者更好地（如下面的代码所示）使用镜像元素属性的直接布尔属性

---

因为您只有一个元素，所以应该使用它的ID而不是它的类，并避免由于

document.getElementsByClassName

返回一个伪元素数组而不是单个元素而导致的复杂性

注意：使用

setAttribute

更改属性的值，或者更好地（如下面的代码所示）使用镜像元素属性的直接布尔属性

---

感谢大家的贡献，下面是我调整过的工作版本：

var rtk5_selection = document.getElementById('rtk5');
var rtk5declaration = document.getElementById('rtk5Declaration');

function rtd3Declaration() {
    if (!rtk5_selection.checked) {
        rtd3declaration.removeAttribute('required');
    } else {
        rtd3declaration.setAttribute('required', 'required');
    }
}
rtk5_selection.addEventListener('change', rtd3Declaration);
document.addEventListener('DOMContentLoaded', rtd3Declaration);
rtd3Declaration();

---

感谢大家的贡献，下面是我调整过的工作版本：

var rtk5_selection = document.getElementById('rtk5');
var rtk5declaration = document.getElementById('rtk5Declaration');

function rtd3Declaration() {
    if (!rtk5_selection.checked) {
        rtd3declaration.removeAttribute('required');
    } else {
        rtd3declaration.setAttribute('required', 'required');
    }
}
rtk5_selection.addEventListener('change', rtd3Declaration);
document.addEventListener('DOMContentLoaded', rtd3Declaration);
rtd3Declaration();

---

---

.getElementsByClassName

返回元素的

HTMLCollection

，而不是单个元素。您需要对它进行迭代。只有解决

rtk5req

是一个伪数组而不是单个元素这一事实，它才会起作用。这个特定类中已知有多少元素？它会影响任何答案的编写方式。对，在这种情况下，我看到了问题所在-您只需将第二个代码更改为使用

var rtk5req=document.getElementById（'rtk'）

不使用它的类和更复杂的

GetElementsByCassName（）

函数，也不要使用更新的代码-正如@Ajun880所指出的，它有缺陷。

。GetElementsByCassName

返回元素的

HTMLCollection

。您需要对它进行迭代。只有解决

rtk5req

是一个伪数组而不是单个元素这一事实，它才会起作用。这个特定类中已知有多少元素？它会影响任何答案的编写方式。对，在这种情况下，我看到了问题所在-您只需将第二个代码更改为使用

var rtk5req=document.getElementById（'rtk'）

而不是使用它的类和更复杂的

GetElementsByCassName（）

函数。并且不要使用更新的代码-正如@ajuni880所指出的，它有缺陷。感谢@Alnitak的指导，但是我认为我可能需要做一些调整，因为它检查ID

#rtk5

是否触发了on change事件，然后不再使用

.rtk5ReqField

类，我将使用ID

rtk5Declaration

在那里应用所需的属性。根据您的评论，假设有一个

.rtkReqField

元素，并且它是具有

#rtk

ID的元素，这里的代码应该完全复制您现有的jQuery代码。如果你需要调整，那是另一个问题。感谢@Alnitak，我用一个我遇到的小问题更新了答案。感谢@Alnitak的指导，但是我认为我可能需要做一些调整，因为它检查ID

#rtk5

是否触发了on change事件，然后不再使用

.rtk5ReqField

类，我将使用ID

rtk5Declaration

在那里应用所需的属性。根据您的评论，假设有一个

.rtkReqField

元素，并且它是具有

#rtk

ID的元素，这里的代码应该完全复制您现有的jQuery代码。如果你需要调整，那是另一个问题。谢谢一堆@Alnitak，我用一个我正在经历的小问题更新了一个答案。啊，这是两个不同的元素？你在问题中没有提到这一点。就我个人而言，我仍然会使用

rtd3declaration.required

作为属性（正如您使用rtk5_selection.checked`而不是乱调用

removeAttribute

。事实上，您可以这样做：

rtd3declaration.required=！rtk5_selection.checked

（请参阅我更新的答案）感谢@Alnitak的指导，我仍然接受它作为最终答案，因为它帮助铺平了道路。注意：你不应该单独调用

rtd3Declaration

，你应该将

getElementById

调用移动到该函数中，以确保它们确实成功。如果在加载DOM之前调用它们，它们将无法保持e right values.ah，那么这是两个不同的元素？你在问题中没有提到。我个人仍然使用

rtd3声明。required

作为属性（正如您对rtk5_selection所做的那样。选中`而不是乱调用

removeAttribute

。事实上，您可以只做：

rtd3declaration.required=！rtk5_selection.checked

（请参阅我的更新答案）感谢@Alnitak的指导，我仍然会接受它作为最终答案，因为它帮助铺平了道路。注意：你不应该单独调用

rtd3Declaration

，你应该移动

getElementById

c