在選擇下拉更改隱藏/顯示覆選框取決於選項的價值

Question

所以我有一系列的按鈕，我用來關閉所有複選框的每一天，這一刻看起來很雜亂，所以我會就像把所有的按鈕變成一個下拉選擇字段，將選項更改爲星期一，例如運行星期一jquery以隱藏所有的星期一複選框。

下面是HTML

<input type='submit' name='submit_performances' value='update all'> 
    <input type='button' id='select-all-toggle' name='select-all-toggle' value='Hide/Show all Performances'> 
    <input type='button' id='select-all-toggle-monday' name='select-all-toggle-monday' value='Hide/Show all Monday Performances'> 
    <input type='button' id='select-all-toggle-tuesday' name='select-all-toggle-tuesday' value='Hide/Show all Tuesday Performances'> 
    <input type='button' id='select-all-toggle-wednesday' name='select-all-toggle-wednesday' value='Hide/Show all Wednesday Performances'> 
    <input type='button' id='select-all-toggle-thursday' name='select-all-toggle-thursday' value='Hide/Show all Thursday Performances'> 
    <input type='button' id='select-all-toggle-friday' name='select-all-toggle-friday' value='Hide/Show all Friday Performances'> 
    <input type='button' id='select-all-toggle-saturday' name='select-all-toggle-saturday' value='Hide/Show all Saturday Performances'> 
    <input type='button' id='select-all-toggle-sunday' name='select-all-toggle-sunday' value='Hide/Show all Sunday Performances'> 
    </form> 

這裏是jQuery的

<script> 
$(document).ready(function() { 
    $('#select-all-toggle').toggle(
     function() { 
      $('.select-all-identifier').prop('checked', true); 
     }, 
     function() { 
      $('.select-all-identifier').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-monday').toggle(
     function() { 
      $('.monday').prop('checked', true); 
     }, 
     function() { 
      $('.monday').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-tuesday').toggle(
     function() { 
      $('.tuesday').prop('checked', true); 
     }, 
     function() { 
      $('.tuesday').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-wednesday').toggle(
     function() { 
      $('.wednesday').prop('checked', true); 
     }, 
     function() { 
      $('.wednesday').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-thursday').toggle(
     function() { 
      $('.thursday').prop('checked', true); 
     }, 
     function() { 
      $('.thursday').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-friday').toggle(
     function() { 
      $('.friday').prop('checked', true); 
     }, 
     function() { 
      $('.friday').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-saturday').toggle(
     function() { 
      $('.saturday').prop('checked', true); 
     }, 
     function() { 
      $('.saturday').prop('checked', false); 
     } 
    ); 
}); 

$(document).ready(function() { 
    $('#select-all-toggle-sunday').toggle(
     function() { 
      $('.sunday').prop('checked', true); 
     }, 
     function() { 
      $('.sunday').prop('checked', false); 
     } 
    ); 
}); 
</script> 

任何幫助將不勝感激。

謝謝，

Answer 1

檢查文檔ftw！ jQuery的文檔有一個處理正是這樣的一個事件，這裏的頁面：

http://api.jquery.com/change/

如果向下滾動一點，你會看到有展示它如何與一個選擇框，作品的互動例子如果我沒有弄錯，那就是你以後的樣子。

此外，一對夫妻一般的JavaScript提示根據您的示例代碼：

1. 正如在評論中提及上面的，你只需要一個文件準備好了，你可以把你所有的代碼，單一的內部人功能。

2. 不要重複自己！您可以通過解析選擇器字符串將所有這些單獨的方法轉換爲一個方法。如果您在每個按鈕上放置兩個類而不是一個ID，則可以在此處有效切割大部分代碼。第一堂課爲select-all-toggle，第二堂課爲星期幾。然後，您可以使用.select-all-toggle選擇器運行切換並在任何元素上更改事件，並使用jquery的$(el).attr('class')來拉下第二個類並獲取當天的值。

我絕對可以在這裏爲你寫一個更清晰的答案，但我認爲這不利於學習。閱讀這裏的建議，並嘗試修改你的代碼 - 我打賭你可以做這個工作，沒有我只是給你一個答案:)