选中特定状态的复选框

时间:2012-08-15 12:45:39

标签: javascript

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

有没有办法用普通的javascript选择所有“纽约州”而不是jquery。

非常感谢任何帮助。

neojakey

修改

我正沿着这些思路思考

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;
          }
     }
}

2 个答案:

答案 0 :(得分:1)

我认为您应该使用函数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;
    }
}

答案 1 :(得分:0)

使用类来标记输入:

<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>

<强> Fiddle