checkbox遍历操作, 提交所有选中项的值-优快云博客

本文详细介绍了如何通过全选/取消按钮批量修改可配送地区的功能，包括使用JavaScript实现全选反选逻辑，以及如何从后台获取并验证城市数据，确保只选择可配送的城市。此外，还展示了如何收集并提交选定城市的ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<div class="content_list pad_10 hidden" >
        
            <h3>修改可配送地区</h3>
            <input type="checkbox" name="checkall" class="J_checkall">全选/取消<br>
            
            <volist name="city_list" id="val" mod="5">
                <input type="checkbox" name="city_name[]" value="{$val.fid}" class="J_checkitem">
                    {$val.name} 
                <eq name="mod" value="4"><br/></eq>
            </volist>
                 
    </div>

<script type="text/javascript">
//全选反选
$('.J_checkall').live('click', function(){
    $('.J_checkitem').prop('checked', this.checked);
    $('.J_checkall').prop('checked', this.checked);
});
var city_data = {$info['city_data']?$info['city_data']:json_encode(array())};
var city_fids = new Array();
$.each(city_data,function(idx,obj){
    city_fids.push(obj.fid);
});

$('.J_checkitem').each(function(){
    //window.alert($.inArray($(this).val(),city_fids));
    if($.inArray($(this).val(),city_fids)>=0){
        $(this).prop("checked",true);
    }
    
});
</script>

上面的实现依赖 <script src="__STATIC__/js/jquery/plugins/listTable.js"></script>

提交所有选中项checkbox的值

var checked_array = [];
function do_checked(){
    checked_array = [];
    $('input[type=checkbox]:checked').each(function(i,o){
        checked_array.push(o.value);
    });
    $('#selected_ids').val(checked_array.join(','));
}

html 页面

<form>
<input type="hidden" name="selected_ids" id="selected_ids" value="" />

<td align="center"><input type="checkbox" class="J_checkitem" value="{$val.id}"></td>
<td align="center"><input type="checkbox" class="J_checkitem" value="{$val.id}"></td>
<td align="center"><input type="checkbox" class="J_checkitem" value="{$val.id}"></td>
<td align="center"><input type="checkbox" class="J_checkitem" value="{$val.id}"></td>
<td align="center"><input type="checkbox" class="J_checkitem" value="{$val.id}"></td>


</form>