回到初始状态时，取消勾选复选框

我：回到初始状态时，取消勾选复选框

<label><input type="checkbox" name="all"> text</label> 
<label><input type="checkbox" name="js-frameworks"> text</label> 

const all = document.getElementsByName('all')[0]; 
const jsFrameworks = document.getElementsByName('js-frameworks')[0]; 

this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.className = 'readonly'; 
    } 
});

我认为，当我取消选中该复选框类“只读”会当我勾选复选框，如果给出的代码只执行删除条件是真的。我似乎无法逃脱if条件，所以要点击和取消点击。我怎样才能做到这一点？

感谢

来源

2017-06-02 Alina Antemir

尝试使用甚至听众'，而不是'change' click' ....'change'是'text'领域... – Bloomberg58

@ Bloomberg58变化和点击更精确实际上等效于复选框，因为点击它总是改变它。 – Barmar

为什么你认为课堂会被删除？不添加东西与删除它不是一回事。 – Barmar

变化这样说：

this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.className = 'readonly'; 
    } else { 
    jsFrameworks.parentNode.className = ''; 
    } 
});

这样你删除的类时选中。

UPDATE：

或者你也可以保存你的元素可能有以前的学生：

let classesBefore = jsFrameworks.parentNode.className; 
this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.className = classesBefore + ' readonly'; 
    } else { 
    jsFrameworks.parentNode.className = classesBefore; 
    } 
});

来源

2017-06-02 21:22:28

虽然这适用于这种情况，但应该注意的是，这将删除可能在父节点上的任何其他类。 – Eggs

-1

试试这个

this.addEventListener("click", function() { 
    this.parentNode.toggle('readonly'); 
}

来源

2017-06-02 21:34:12

我试过了classList.toggle（），但是每次选择复选框时我都会删除这个类，当我取消选择它时，我想删除这个类。 Merunas解决方案效果最好，尽管我一直在寻找一种更有效的方式，而不是使用其他方法 –

'toggle（）'是一个jQuery函数，它用于隐藏和显示元素; 'toggleClass（）'用于改变一个类。但他没有使用jQuery。 – Barmar

试试这个。

const all = document.getElementsByName("all")[0]; 
const jsFrameworks = document.getElementsByName("js-frameworks")[0]; 

this.addEventListener("change", function() { 
    if (all.checked) { 
    jsFrameworks.parentNode.classList.add("readonly"); 
    } else if (!all.checked) { 
    jsFrameworks.parentNode.classList.remove("readonly");  
    } 
});

来源

2017-06-02 22:18:39 Eggs

他为什么要尝试这个？解释问题是什么以及如何修复它。 – Barmar

您应该只使用'else'，因为'！all.checked'是唯一的其他可能性。 – Barmar

@Barmar，它在我测试它的时候工作。在回答你的第二个问题时，我明确指出！all.checked，因为我是防弹的，因为我可能不知道其他可能的结果。听起来合理吗？ – Eggs

回到初始状态时，取消勾选复选框

回答

相关问题