回到初始狀態時，取消勾選複選框

我：回到初始狀態時，取消勾選複選框

<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

回到初始狀態時，取消勾選複選框

回答

相關問題