bootstrap怎么将radio分组,组间不互相影响?

如何写,让1、2、3之间的选择不互相影响?

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <style>
            img{width: 75px;height: auto;margin-right: 70px}
            .class1{}
        </style>
        <title>详情页</title>
    </head>

        <body style="margin-top:120px ;margin-left: 70px;margin-right: 100px;">
        <header class="fixed-top"style="background-color: #FFFFFF;">
            <!--解决header和内容重叠问题?加个bg-withe就行啦!太聪明了-->
            <div class="container-fluid"><br />
                 <div class="form-inline offset-1">
                    <img src="../image/abb.png">
                    <h4 style="margin-bottom: 0;">Indetail</h4>
                </div><hr style="margin-top: 0 ;margin-bottom: 0;">
            </div>
        </header>

        <div class="container-fluid">
            <div class="row">
                <div class="col-5"> 

                    <div class="row">
                        <div class="col-md-3 bg-warning text-center ">CaseID</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "caseid" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">CaseDetailID</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "CaseDetailID" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">CaseLevel</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "CaseLevel" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">OnsiteOffice</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "OnsiteOffice" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">OnsiteArea</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "OnsiteArea" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">SalesOffice</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "SalesOffice" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">SalesArea</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "SalesArea" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">CompanyName</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "CompanyName" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">CaseOwner</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "CaseOwner" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">ProjectName</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ProjectName" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">SubmitedBy</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "SubmitedBy" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">submiteddate</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "submiteddate" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">TS Owner</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "TS Owner" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">receiveqty</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "receiveqty" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">BUNumber</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "BUNumber" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">ProductType</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ProductType" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">MM</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "MM" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">SerialNo</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "SerialNo" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">VendorCode</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "VendorCode" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">VendorDesc</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "VendorDesc" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">MMDesc</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "MMDesc" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">statusname</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "statusname" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">ProblemTypeID</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ProblemTypeID" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">ProblemTypeName</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ProblemTypeName" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">problemdesc</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "problemdesc" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">CaseDetail</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "CaseDetail" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">finaladvice</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "finaladvice" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light ">Comment</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "Comment" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">IsDuplicated</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "IsDuplicated" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light ">ServiceTypeName</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ServiceTypeName" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">SAPProductType</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "SAPProductType" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light ">ReplaceID</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ReplaceID" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">ReplaceSubmitedDate</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ReplaceSubmitedDate" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">ReplaceLocation</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ReplaceLocation" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">VendorConfirmedDate</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "VendorConfirmedDate" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">ResolvedName</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "ResolvedName" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">Product解决时间</div>
                        <div class="col-md-8 text-md-left">*Insert and show "Product解决时间" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">Product完成时间</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "Product完成时间" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-warning text-center ">With Attachment</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show With "Attachment" from SQL </div>
                    </div>

                    <div class="row"style="margin-top: 10px;">
                        <div class="col-md-3 bg-info text-center text-light">TS Link</div>
                        <div class="col-md-8 text-md-left "style="margin-left: 10px;">*Insert and show "TS Link" from SQL </div>
                    </div>

                </div>
                <div class="col-1">
                    <!--这只是一个页面垂直分割的div没啥作用,单纯好看!-->
                    <div style="width:1px; background:#101010;float:left;height:1400px;"></div>
                </div>
                <div class="col-6">
                    <form class="form-horizontal">
                        <div class="form-group row">
                            <div class="col-3">
                                <label for="">
                                    <strong>1、Replacement</strong>
                                </label>
                            </div>
                            <div class="col-4">
                                <div class="row">
                                    <div class="col-4">
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions" id="need_replacement" value="option1" > Need
                                </label>
                                    </div>

                                    <div class="offset-1 col-6">
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions" id="neednt_replacement" value="option2" > Needn't
                                </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-5">
                                <a class="btn btn-sm badge-info" href="mailto:#" role="button">发送邮件</a>     
                                <a class="btn btn-sm badge-info" href="#" role="button">查看信息</a>    
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-3">
                                <label for="">
                                    <strong>2、8D Report</strong>
                                </label>
                            </div>
                            <div class="col-4">
                                <div class="row ">
                                    <div class="col-4">
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions" id="need_report" value="option3" > Need
                                </label>
                                    </div>

                                    <div class="offset-1 col-6">
                                <label class="radio-inline">
                                    <input type="radio" name="inlineRadioOptions" id="neednt_report" value="option4" > Needn't
                                </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-5">
                                <a class="btn btn-sm badge-info" href="mailto:#" role="button">发送邮件</a>     
                                <a class="btn btn-sm badge-info" href="#" role="button">查看信息</a>    
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-3">
                                <label for="">
                                    <strong>3、Repair</strong>
                                </label>
                            </div>
                            <div class="col-4">
                                <div class="row">
                                    <div class="col-4">
                                        <label class="radio-inline">
                                            <input type="radio" name="inlineRadioOptions" id="need_repair" value="option5" > Need
                                        </label>
                                    </div>
                                    <div class="offset-1 col-6">
                                        <label class="radio-inline">
                                            <input type="radio" name="inlineRadioOptions" id="neednt_repair" value="option6"> Needn't
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-5">
                                <a class="btn btn-sm badge-info" href="mailto:#" role="button">发送邮件</a>     
                                <a class="btn btn-sm badge-info" href="#" role="button">查看信息</a>    
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </body>
</html>

2个回答

是一组就起一样的name,不是一组就再换个name啊

qq_44050118
小猪JB 非常感谢!解决了
12 个月之前 回复

同一组中放置同一个name值,另一组放别的name值

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问