select、input-checkbox标签的多值处理

单选select：

<select id="group_id" name="group_id">
    <option value="0" selected="true">农业</option>
    <option value="1">工业</option>
</select>

 

 

多选的select：

<select id="group_id" name="group_id[]" multiple="true">
    <option value="0" selected="true">农业</option>
    <option value="1" selected="true">工业</option>
</select>

 注意：属性name的值后面多了对“[ ]”，表示值为数组，同时属性multiple要设置为true。

在PHP端接收的时候，$_POST['group_id']将返回一维数组。

 

 

再说说input中的checkbox：

<label><input type="checkbox" name="level[]" value="1" />活跃用户</label> 
<label><input type="checkbox" name="level[]" value="2" />一级用户</label> 
<label><input type="checkbox" name="level[]" value="3" />二级用户</label> 
<label><input type="checkbox" name="level[]" value="4" />三级用户</label>

 在PHP，$_POST['level']同样返回一维数组。

用js判断checkbox至少选一个，方法只有一个，通过document的getElementsByName()方法返回一个数组，然后遍历每个元素的属性checked，如果为true，表示被选中。

代码如下：

var games = document.getElementsByName('level[]');
var flag = true;
for(i=0; i<games.length; i++) {
    if(games[i].checked) {
        flag = false;
        break;
    }
}
if(flag) {
    alert('请勾选您要开通的服务');
    return false;
}

 input中的radio情形，大致与checkbox相似。

 

获取复选框的多个选中值

--------------------------

 分类：
                <input type="checkbox" name="category" value="1" id="category_0" />
        <label for="category_">twitter产品</label>
                <input type="checkbox" name="category" value="3" id="category_1" />

        <label for="category_">twitter新闻</label>
                <input type="checkbox" name="category" value="6" id="category_2" />
        <label for="category_">传说与趣事</label>
                <input type="checkbox" name="category" value="23" id="category_3" />
        <label for="category_">twitter营销</label>
                <input type="checkbox" name="category" value="27" id="category_4" />
        <label for="category_">三角地</label>

 js取值（用jquery实现）：

var categories = $('input[name="category"]:checked').map(function() {
                    return $(this).val();
                 }).get();
alert(categories);

 

评论

1 楼 cuit_miaolin 2014-10-17  

[b]

[flash=200,200][url][img][list]

[*]

引用

[/list][/img][/url][/flash]

[/b]