这里只说一些经常用到的元素属性和checkbox相关的方法。

1、首先是HTML:(checkbox的声明)

声明一个checkbox主要是用到上面几个属性:

type:代表input的类型,值为checkbox则代表是多选框。name:设置返回checkbox的名称,也就是说要想我们选中的选项能一起通过form提交,则必须声明为name相同。value:设置或返回checkbox的value属性的值,我们在提交form表单的时候value代表我们选中的那个checkbox的值。checked:设置或返回checkbox是否被选中。disabled:设置或返回checkbox是否应被禁用。

上面是一些关于checkbox常用的属性说明,下面我们来举一个例子:

篮球

足球

排球

乒乓球

上面我们声明了一个name为ball的多选框,其中第一个value为basketball则如果我们选中,则提交的时候就会将该value值提交到服务器,我们设置第一个checkbox为checked,则默认选中第一项。

2、通过点击文字,来实现点击响应的checkbox:(两种方式)

第一种:直接在每个input中声明一个id,然后后面的文字用lable标签包起来,并使用for属性指向input中的id实现绑定。

第二种:直接使用lable标签将input和文本一起嵌套起来(简单粗暴)。

3、如何获取checkbox选中的值:(也是两种)

第一种:使用JQuery获取:

1)我们获取单个checkbox选中的值:

var checks = $("input[name = 'ball']:checked").val();

2)获取多个checkbox选中的值:

function jqueryFun(){

var arr = []; //声明一个数组用来存放遍历出来的checkbox value值

$("input[name='ball']:checked").each(function(i){ //遍历

arr.push($(this).val()); //将我们遍历出来的值push到数组中

//最后可以提交arr就可以实现将我们选中的checkbox的value值提交

})

}

第二种:使用JavaScript来获取:

function test(){

// 获取所有的复选框元素

var obj1 = document.ballForm.ball;

var arr = [];

for(i = 0; i< obj1.length; i++){

if(obj1[i].checked){

arr.push(obj1[i].value);

}

}

}

//最后将我们获取到的arr提交就可以了

注意:jQuery对象取值时:jqueryObj.val();dom对象取值时: domObj.value;

4、判断某个checked是否被选中:(三种方法)

在JQuery1.6版本之后,取消复选框有没有选中,我们都是使用prop方法:prop和attr的区别与使用

方法一:

if ($("#checkbox-id").get(0).checked) {

// do something

}

if ($("#checkbox-id")[0].checked) {

// do something

}

方法二:

if($('#checkbox-id').is(':checked')) {

// do something

}

方法三:

if ($('#checkbox-id').prop('checked')) {

// do something

}

5、设置复选框是否为选中的代码:

$("input[name='ball']").prop("checked",true/false);

$("input[name='ball']").prop("checked",$("#1").prop('checked'));

6、额外:获取选择 radio 的值:

$("input:radio[name='']:checked").val();

你要去做一个大人,不要回头,不要难过。

“我还是很喜欢你,像雨洒落在热带与极地,不远万里。”