1

カテゴリに整理されたチェックボックスがたくさんあります。各カテゴリに対応するチェックボックスのグループを切り替えるチェックボックスがあります。何らかの理由で、IEでは機能していません。ただし、正常に機能するように、すべてのリンクを個別に選択/すべてクリアすることができました。

ここのコードを参照してください：http： //jsfiddle.net/mobilemelody/DyZF4/1/

詳細については、これらのボックスを使用して、mapsAPIでGoogleフュージョンレイヤーのオンとオフを切り替えています。ありがとう！

編集

申し訳ありませんが、私は元々JSfiddleにコードを入れていました。なぜなら、それは人々にとってより簡単だと思ったからです。

Javascript：

function toggleOn(source) {
        var checkboxes = source;
        for(var i = 0; i < checkboxes.length; i++)
            checkboxes[i].checked = true;
    }
    function toggleOff(source) {
        var checkboxes = source;
        for(var i = 0; i < checkboxes.length; i++)
            checkboxes[i].checked = false;
    }
    function toggle(toggleBox, source) {
        var checkboxes = source;
        for(var i = 0; i < checkboxes.length; i++)
            checkboxes[i].checked = toggleBox.checked;
    }

HTML：

    <div>
    <table>
    <tr><td colspan="5"><label><strong>Routes:</strong></label></td></tr>
    <tr>
    <td><input type="checkbox" checked="checked" name="route" id="toggle-local" onClick="toggle(this, document.getElementsByClassName('local'))">local</td>
    <td><input type="checkbox" checked="checked" name="route" id="17" value="17" class="local"/><label>17</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="19" value="19" class="local"/><label>19</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="22" value="22" class="local"/><label>22</label></td>
    </tr><tr>
    <td></td>
    <td><input type="checkbox" checked="checked" name="route" id="23" value="23" class="local"/><label>23</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="29" value="29" class="local"/><label>29</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="35" value="35" class="local"/><label>35</label></td>
    </tr><tr>
    <td></td>
    <td><input type="checkbox" checked="checked" name="route" id="36" value="36" class="local"/><label>36</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="45" value="45" class="local"/><label>45</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="49" value="49" class="local"/><label>49</label></td>
    </tr><tr>
    <td></td>
    <td><input type="checkbox" checked="checked" name="route" id="51" value="51" class="local"/><label>51</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="71" value="71" class="local"/><label>71</label></td>
    </tr><tr>
    <td><input type="checkbox" checked="checked" name="route" id="toggle-stage" onClick="toggle(this, document.getElementsByClassName('stage'))">stage</td>
    <td><input type="checkbox" checked="checked" name="route" id="61" value="61" class="stage"/><label>61</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="68" value="68" class="stage"/><label>68</label></td>
    </tr><tr>
    <td><input type="checkbox" checked="checked" name="route" id="toggle-shuttle" onClick="toggle(this, document.getElementsByClassName('shuttle'))">shuttle</td>
    <td><input type="checkbox" checked="checked" name="route" id="222" value="222" class="shuttle"/><label>222</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="233" value="233" class="shuttle"/><label>233</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="257" value="257" class="shuttle"/><label>257</label></td>
    </tr><tr>
    <td></td>
    <td><input type="checkbox" checked="checked" name="route" id="259" value="259" class="shuttle"/><label>259</label></td>
    </tr><tr>
    <td><input type="checkbox" checked="checked" name="route" id="toggle-school" onClick="toggle(this, document.getElementsByClassName('school'))">school</td>
    <td><input type="checkbox" checked="checked" name="route" id="113" value="113" class="school"/><label>113</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="117" value="117" class="school"/><label>117</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="125" value="125" class="school"/><label>125</label></td>
    </tr><tr>
    <td></td>
    <td><input type="checkbox" checked="checked" name="route" id="126" value="126" class="school"/><label>126</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="127" value="127" class="school"/><label>127</label></td>
    <td><input type="checkbox" checked="checked" name="route" id="139" value="139" class="school"/><label>139</label></td>
    </tr></table>
</div>

<a id="select-all" onClick="toggleOn(document.getElementsByName('route'))" style="cursor: pointer;">select all</a> | 
<a id="clear-all" onClick="toggleOff(document.getElementsByName('route'))" style="cursor: pointer;">clear all</a>
4

1 に答える 1

2

document.getElementsByClassName()IE<9ではサポートされていません。ただし、このポリフィルを使用することはできます。これにより、次のことを行わないレガシーブラウザ用に定義されます。 

(function () {
        document.getElementsByClassName = function(classes) {
            return this.querySelectorAll('.' + classes.replace(' ', ' .'));
        }
}());

もう1つの方法は、代わりにjQueryのクラスセレクターを使用することです。

于 2012-08-29T21:31:25.477 に答える