jquery choose多选如何不让它换行

根据多选框name来获得选中的值可用如下 jquery代码实现

$("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框

$(this).val() // 每一个被选中项的值

})

实例演示：给出两组多选框，点击按钮后分别获得两组中被选择的项目

示例代码如下

创建Html元素

<div class="box">

<span>请输入用户名，限定字母、数字或下划线的组合：</span>

<div class="content">

<span>水果：</span>

<input type="checkbox" name="fruit" value="梨子"/>梨橡尺子

<input type="checkbox" name="fruit" value="李子"/>李子

<input type="checkbox" name="fruit" value="栗子"/>栗子

<input type="checkbox" name="fruit" value="荔枝"/>荔枝

<span>蔬菜：</span>

<input type="checkbox" name="vegetable" value="青菜"/>青菜

<input type="checkbox" name="vegetable" value="萝卜"/>萝卜

<input type="checkbox" name="vegetable" value="土豆"/>土豆

<input type="checkbox" name="vegetable" value="茄子"/>茄子

</div>

<input type="button" value="提交">

</div>

设祥如袭置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

input[type='checkbox']{margin:5px}

input[type='button']{height:30pxmargin:10pxpadding:5px 10px}

编写jquery代码

$(function(){

// 设置属性值

$("input:button").click(function() {

var fruit = ""

var vegetable = ""

$("input:checkbox[name='fruit']:checked").each(function() {

fruit += $(this).val() + " "

})

$("input:checkbox[name='vegetable']:checked").each(function() {

vegetable += $(this).val() + " "

})

alert("已选谨兄择水果："+fruit+"，已选择蔬菜："+vegetable)

})

})

1、首先我们新建一行旁埋个小程序，目录如下图所示。

2、接着我们给页面声明个背景色，方便查看效果。

3、然后在页面中定义一个button，如下图所示。

4、可以看到档蚂左侧的button效果如下图所示。

5、然后我们直接在button中重启拍新填写要修改的默认样式即可覆盖，如下图所示。

6、可以看到页面的button样式被修改掉了。

---