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

最新推荐文章于 2021-08-20 16:40:51 发布

最新推荐文章于 2021-08-20 16:40:51 发布 · 210 阅读

文章标签：

#农业 #Twitter #jQuery #PHP #ViewUI

php 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了HTML表单中的单选和多选元素的使用方法，包括select和checkbox的应用技巧及如何通过PHP处理这些元素的数据。

单选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);