bootstrap中checkbox操作實戰例子

bootstrap中checkbox操作實戰例子

<script type="text/javascript">
$(document).ready(function() {
    //init val
    var initwei = $('#wei').val();
    $("input[name='wz']").each(function(i){
        if(initwei.indexOf($(this).val()) != -1){
            $(this).prop('checked', true);
        }
    });
    
    $('#submitBtn').on('click', function(){
        //set val
        var wzstr = '';
        $("input[name='wz']:checked").each(function(i){
            wzstr = wzstr + $(this).val() + ',';
        });
        $('#wei').val(wzstr);
    });
});

</script>  

<div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 ">
        <label class="mr10">
            <input type="checkbox" name="wz" value="54">54
        </label>
        <label class="mr10">
            <input type="checkbox" name="wz" value="53">53
        </label>
        <label class="mr10">
            <input type="checkbox" name="wz" value="52">52
        </label>
        <label class="mr10">
            <input type="checkbox" name="wz" value="51">51
        </label>
        <label class="mr10">
            <input type="checkbox" name="wz" value="43">43
        </label>
    </div>
    <div class="left ml10">
        <input type="submit" id="submitBtn" class="btn btn-default" value="查詢"/>
        <input type="hidden" id="wei" name="wei" style="dispaly:none" value="54,53,52,51"/>
    </div>