2

我一直在努力寻找我认为应该很容易解决的问题的答案，但我必须在寻找一些东西。我对 Javascript 很陌生，对 jQuery 不太适应。我也想完全用 javascript 来做这件事，因为这是我第一次真正尝试它。我有一个使用复选框的项目，并且在到达我所在的位置时得到了一些帮助，但我正在尝试使用 document.getElementsByClassName 来更改多个类的样式。

我已使用 .querySelectorAll 选项将我的脚本更新为以下内容。我还添加了一个 else 来删除灰色文本颜色并启用复选框。

function bannerBernini() {
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
    var berninis = document.querySelectorAll('.picasso, .matisse');
    for(var i = 0; i < berninis.length; i++) {
    berninis[i].style.color="#d1d1d1";}
    var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
    for (var j = 0; j <  not_bernini.length; j++){
    not_bernini[j].disabled=true;}
}
else
{
    var berninis = document.querySelectorAll('.picasso, .matisse');
    for(var i = 0; i < berninis.length; i++) {
     berninis[i].style.color="";}
    var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
    for (var j = 0; j <  not_bernini.length; j++){
    not_bernini[j].disabled=false;}
}}

**现在我需要弄清楚如何让两个选项共享但不相互干扰的复选框。例如;

复选框“单一图形使用”仅适用于 Bernini，但复选框“银色饰面”适用于 Bernini 和毕加索。如何在选中“单一图形使用”时仍然启用该选项，但如果选中“夹入式顶部导轨”则不启用？

如果需要，这里是一些 html

<div id="column1" style="width:250px; padding:5px 10px 5px 10px; float:left">
    <form name="checkForm1" id="checkForm1">
        <span class="all"><input type="checkbox" id="att_1" name="att_1" class="all" onChange="">Single-sided</span><br />
        <span class="bernini"><input type="checkbox" id="att_2" name="att_2" onChange="bannerBernini();">Visible Banner: 33.5" x 36"-78.7"</span><br />
        <span class="picasso"><input type="checkbox" id="att_3" name="att_3" onChange="">Medium Duty Spring System</span><br />
        <span class="matisse"><input type="checkbox" id="att_4" name="att_4" onChange="">Clip-in Top Rail</span><br />
        <span class="bernini"><input type="checkbox" id="att_5" name="att_5" onChange="bannerBernini();">Adjustable Twist Locking Pole</span><br />
        <span class="bernini"><input type="checkbox" id="att_6" name="att_6" onChange="bannerBernini();">Single graphic use</span><br />
        <span class="all"><input type="checkbox" id="att_7" name="att_7" onChange="">Carrying case included</span><br />
        <span class="all"><input type="checkbox" id="att_8" name="att_8" onChange="">Silver finish</span><br />
    </form>

感谢您提供的任何帮助。

我已经更新了代码，这里是我所拥有的链接。我快要得到我需要的东西了（非常感谢大家）我现在唯一不知道的是；

“Tape-in​​ Bottom Rail”复选框需要显示所有适用于“bernini and picasso”类的复选框。现在，如果您单击该复选框，它就可以工作。但是，如果您还选择了仅适用于“bernini”或“毕加索”的复选框，则取消选中它，则不应该使用的选项变为可用。有人对如何缓解这种情况有建议吗？

http://jsfiddle.net/g_borg/48uhn/1/

4

6 回答 6

8

而不是document.getElementsByClassName使用document.querySelectorAll并传入 CSS选择器（不仅仅是类名）：

var berninis = document.querySelectorAll('.picasso, .matisse');
for(var i = 0; i < berninis.length; i++) {
  berninis[i].style.color="#d1d1d1";
}
于 2013-11-11T14:57:04.553 回答
2

为了澄清一点混乱，您可以在 中拥有多个类名getElementsByClassName，但它会选择具有所有列出的类的元素。

换句话说，

document.getElementsByClassName('picasso matisse')

会选择这个

<span class="picasso matisse"></span>

但不是这些

<span class="picasso"></span>
<span class="matisse"></span>
于 2013-11-11T14:56:16.193 回答
0

我强烈建议改变你的方法，可能如下：

function bannerBernini (e){ // e is the 'change' event, passed automagically to the function.
    var _self = this, // the form itself
        changed = e.target, // the changed element
        spans = _self.getElementsByTagName('span'),
        spanClass = e.target.parentNode.tagName.toLowerCase() == 'span' ? e.target.parentNode.className : false,
        children; // a stored variable for later
    // if the span has a className:
    if (spanClass) {
        // iterate over all the spans in the form:
        for (var i = 0, len = spans.length; i < len; i++){
            // if the class of the parent span is *not* in the span we're iterating over:
            if (spans[i].className.indexOf(spanClass) == -1){
                // store the childNodes of the current span in the previously-declared variable:
                children = spans[i].childNodes;
                // iterate over those childNodes:
                for (var c = 0, cL = children.length; c < cL; c++){
                    // if the childnode is an element (nodeType === 1), and is of type == 'checkbox':
                    if (children[c].nodeType === 1 && children[c].type == 'checkbox') {
                        // set the current checkbox/childNode's disabled attribute to true, or false (the checked-state of the changed element):
                        children[c].disabled = changed.checked;
                    }
                }
            }
        }
    }
}

// the form we want to act upon:
var form = document.getElementById('checkForm1');

// adding an event-listener and binding an event-handler (for that event):
form.addEventListener('change', bannerBernini);

JS 小提琴演示。

但是，在最新的浏览器中，上述内容可以大大缩短为：

function bannerBernini(e) { // again the event ('e') passed automagically
    // the className of the parent span element to the changed element:
    var filterClass = e.target.parentNode.className;
    // if we have a filterClass:
    if (filterClass) {
        /* we're using array.prototype.forEach to iterate over the collection
           returned by "document.querySelectorAll('span')", the 'a' represents
           the array element we're iterating over currently: */
        [].forEach.call(document.querySelectorAll('span'), function(a){
            /* setting the disabled property of the (first/only) input of
               type="checkbox" to:
               false, if the filterClass is 'all',
                   or the classList of 'a' contains the filterClass *and*
               the changed-element is now checked. */
            a.querySelector('input[type="checkbox"]').disabled = !(filterClass === 'all' || a.classList.contains(filterClass)) && e.target.checked;
        });
    }
}

var form = document.getElementById('checkForm1');

form.addEventListener('change', bannerBernini);

JS 小提琴演示。

于 2013-11-11T15:12:25.833 回答
0

getElementsByClassName() 一次只适用于一个类。

您可以更改您的功能，使其看起来像这样：

function bannerBernini()
{
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
    var classes = ['picasso','matisse']
    for (var j = 0; j < classes.length; j++)
    {
    var berninis = document.getElementsByClassName(classes[j]);
    for(var i = 0; i < berninis.length; i++) {
    berninis[i].style.color="#d1d1d1";}
    {
        document.getElementById("Picasso").style.display="none";
        document.getElementById("Matisse").style.display="none";
        document.getElementById("att_3").disabled=true;
        document.getElementById("att_10").disabled=true;
        document.getElementById("att_11").disabled=true;
        document.getElementById("att_13").disabled=true;
        document.getElementById("att_14").disabled=true;
        document.getElementById("att_16").disabled=true;
        document.getElementById("att_17").disabled=true;
        document.getElementById("att_18").disabled=true;
        document.getElementById("att_19").disabled=true;
        document.getElementById("att_20").disabled=true;
        document.getElementById("att_21").disabled=true;
        document.getElementById("att_22").disabled=true;
        document.getElementById("att_24").disabled=true;
    }
}}}

我所做的是我创建了一个你想要通过的类的数组，用你想要使用的两个类初始化数组，然后我们简单地遍历数组。

我建议你试试 jQuery。它很容易使用，而且这种东西正是它的本意。使用普通的 JS 处理 DOM 有时很麻烦。

于 2013-11-11T14:44:10.340 回答
0

您必须复制粘贴“document.getElementById("att_XYZ").disabled=true;”的事实 十几次表明你有错误的方法。这是因为如果您想在 HTML 中添加另一个复选框，您还需要修改您的 Javascript 代码，这非常令人不快，因为它会导致错误。

我不会手动命名每个元素，而是将需要同时控制的元素与单个类名组合在一起。例如：

<span class="bernini"><input class="groupA" type="checkbox" id="att_2" name="att_2" onChange="bannerBernini();">Visible Banner: 33.5" x 36"-78.7"</span><br />
<span class="picasso"><input class="groupA" type="checkbox" id="att_3" name="att_3" onChange="">Medium Duty Spring System</span><br />

然后，在您的代码中，您可以编写

var allCheckboxesFromGroupA = $('input.groupA');
foreach(allCheckboxesFromGroupA as item) {
   item.disabled = true;
}

编辑：如果您不想使用 jQuery，该方法仍然适用：

var allCheckboxesFromGroupA = document.getElementsByClassName('groupA');
foreach(allCheckboxesFromGroupA as item) {
   item.disabled = true;
}
于 2013-11-11T14:47:11.203 回答
0

您可以分两步完成。首先获取 picasso 类的元素，然后将 matisse 类的元素添加到数组中：

var berninis = document.getElementsByClassName('picasso');
berninis.concat (document.getElementsByClassName('matisse'));
for(var i = 0; i < berninis.length; i++) { // Rest of your code here
于 2013-11-11T14:48:20.120 回答