jQuery将按钮集划分为一定数量的行答案

【问题标题】：jQuery divide a buttonset into a certain number of rowsjQuery将按钮集划分为一定数量的行
【发布时间】：2013-09-22 13:00:56
【问题描述】：

我正在寻找一个 jQuery 插件，它可以让我创建一个按钮数组，我找到了jQuery UI buttonset 现在这个小部件非常接近我的需要，因为当时只能检查一个按钮，但现在问题来了：这个小部件是否提供了一种在特定行数中显示选项（收音机）列表的方法？我问是因为我想得到如下图所示的结果：

这是fiddle

还有Html代码：

<fieldset>
    <legend>Operators</legend>
    <div id="pare">
        <input type="radio" id="pareA" name="pare" value="(" />
        <label for="pareA">(</label>
        <input type="radio" id="pareC" name="pare" value=")" />
        <label for="pareC">)</label>
    </div>
    <div id="arit">
        <input type="radio" id="arit1" name="arit" value="+" />
        <label for="arit1">+</label>
        <input type="radio" id="arit2" name="arit" value="-" />
        <label for="arit2">-</label>
        <input type="radio" id="arit3" name="arit" value="*" />
        <label for="arit3">*</label>
        <input type="radio" id="arit4" name="arit" value="/ " />
        <label for="arit4">/</label>
    </div>
    <div id="rela">
        <input type="radio" id="rela2" name="rela" value=">" />
        <label for="rela2">></label>
        <input type="radio" id="rela5" name="rela" value="<" />
        <label for="rela5">&lt;</label>
        <input type="radio" id="rela3" name="rela" value="&gt;=" />
        <label for="rela3">>=</label>
        <input type="radio" id="rela6" name="rela" value="&lt;=" />
        <label for="rela6">&lt;=</label>
        <input type="radio" id="rela1" name="rela" value="=" />
        <label for="rela1">&nbsp;=&nbsp;</label>
        <input type="radio" id="rela4" name="rela" value="<>" />
        <label for="rela4">&lt;&gt;</label>
    </div>
    <div id="logi">
        <input type="radio" id="logi1" name="logi" value="And" />
        <label for="logi1">And</label>
        <input type="radio" id="logi2" name="op" value="Or" />
        <label for="logi2">&nbsp;Or</label>
    </div>
</fieldset>

和js：

$("#pare").buttonset();
$("#arit").buttonset();
$("#rela").buttonset();
$("#logi").buttonset();

任何建议或指导将不胜感激。

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-button

【解决方案1】：

如果我理解您的问题是正确的，您想更改应用 css 以更改您的 html，如图片中所述。尝试使用以下内容更新您的 html 代码：

<fieldset>
    <legend>Operators</legend>
    <div class="left">
    <div id="pare">
        <input type="radio" id="pareA" name="pare" value="(" />
        <label for="pareA">(</label>
        <input type="radio" id="pareC" name="pare" value=")" />
        <label for="pareC">)</label>
    </div>
    <div id="arit">
        <input type="radio" id="arit1" name="arit" value="+" />
        <label for="arit1">+</label>
        <input type="radio" id="arit2" name="arit" value="-" />
        <label for="arit2">-</label>
        <input type="radio" id="arit3" name="arit" value="*" />
        <label for="arit3">*</label>
        <input type="radio" id="arit4" name="arit" value="/ " />
        <label for="arit4">/</label>
    </div>
        </div>
    <div class="right">
    <div id="rela">
        <input type="radio" id="rela2" name="rela" value=">" />
        <label for="rela2">></label>
        <input type="radio" id="rela5" name="rela" value="<" />
        <label for="rela5">&lt;</label>
        <input type="radio" id="rela3" name="rela" value="&gt;=" />
        <label for="rela3">>=</label>
        <input type="radio" id="rela6" name="rela" value="&lt;=" />
        <label for="rela6">&lt;=</label>
        <input type="radio" id="rela1" name="rela" value="=" />
        <label for="rela1">&nbsp;=&nbsp;</label>
        <input type="radio" id="rela4" name="rela" value="<>" />
        <label for="rela4">&lt;&gt;</label>
    </div>
    <div id="logi">
        <input type="radio" id="logi1" name="logi" value="And" />
        <label for="logi1">And</label>
        <input type="radio" id="logi2" name="op" value="Or" />
        <label for="logi2">&nbsp;Or</label>
    </div>
    </div>
</fieldset>

CSS：

.left{
    float:left;
}
.right{
    float:left;
}

#arit{
    width:100px;
}

#rela{
    width:140px;
}

DEMO FIDDLE

【讨论】：