处于特定状态的复选框

Check boxes in specific state

本文关键字：复选框 状态 于特定      更新时间：2023-09-26

我有一个美国主要城市的复选框网格。 我创建了一个下拉菜单来选择一个状态。 当用户单击提交按钮时，我想选中该特定状态的所有复选框。 我已经为每次检查使用动态 ID，我想我可以用 title 属性来识别它们。

有没有办法用常规的javascript而不是jquery选择所有"纽约州"。

任何帮助将不胜感激。

尼奥杰基

编辑

我沿着这些思路思考

function SelectState(StateAbbr)
{
     var f = document.frmChangeMemberPaid;
     checkboxes = document.getElementsByName('LocalPageID');
     for(var i in checkboxes)
     {
          if(checkboxes[i].attributes[1].name == StateAbbr)
          {
               checkboxes[i].checked = source.checked;
          }
     }
}

我认为您应该使用函数getElementsByTagName来获取所有输入，过滤掉所有复选框，然后仅选中符合您条件的复选框：

var inputs = document.getElementsByTagName("input");
for (var i=0, count = inputs.length; i < count; i++) {
    var node = inputs.item(i);
    if (node.type === "checkbox") {
        if (node.title === "New York State") {
            node.checked = true;
        } else {
            // uncheck other checkboxes in case they are already checked
            node.checked = false;
    }
}

使用类来标记输入：

<table id="cities" border="1">
    <tr>
        <td>
            Miami, FL
            <input type="checkbox" value="Miami" class="FL" />
        </td>
        <td>
            New York City, NY
            <input type="checkbox" value="New York City" class="NY" />
        </td>
    </tr>
    <tr>
        <td>
            Tampa, FL
            <input type="checkbox" value="Tampa" class="FL" />
        </td>
        <td>
            Buffalo, NY
            <input type="checkbox" value="Buffalo" class="NY" />
        </td>
    </tr>
</table>
<select id="states">
     <option value="FL">FL</option>
    <option value="NY">NY</option>
</select>
<script type="text/javascript">
    var cities = document.getElementById('cities'),
    states = document.getElementById('states');
    function checkCitiesOf(state) {
        inputs = cities.getElementsByTagName('input');
        for(var i = 0, l = inputs.length; i < l; i++) {
            inputs[i].checked = inputs[i].className == state;       
        }
    }
    states.onchange = function() {
        checkCitiesOf(this.value);
    };
</script>

小提琴

相关文章：