首页 前端知识 js checkbox 的使用(取值、赋值、判断是否选中)

js checkbox 的使用(取值、赋值、判断是否选中)

2024-06-26 23:06:25 前端知识 前端哥 187 592 我要收藏

1. html checkbox 的使用(取值、赋值、判断是否选中)

1.1. checkbox的声明

<input type="" name="" value="" disabled="none" checked="checked" />

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

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

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

<input type="checkbox" name="ball" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="ball" value="football" />足球
<input type="checkbox" name="ball" value="volleyball" />排球
<input type="checkbox" name="ball" value="badminton" />乒乓球

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

1.2. checkbox的声明(两种方式)

  通过点击文字,来实现点击响应的checkbox。

1.2.1. 第一种

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

<form name="ballForm" id="formId">
	<input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/><label for="1">篮球</label>
	<input type="checkbox" name="ball" value="football" id="2"/><label for="2">足球</label>
	<input type="checkbox" name="ball" value="volleyball" id="3"/><label for="3">排球</label>
	<input type="checkbox" name="ball" value="badminton" id="4"/><label for="4">乒乓球</label>
</form>

1.2.2. 第二种

  直接使用lable标签将input和文本一起嵌套起来。

<label><input name="ball" type="checkbox" value="basketball" checked="checked"/>篮球</label> 
<label><input name="ball" type="checkbox" value="football" />足球</label> 
<label><input name="ball" type="checkbox" value="volleyball" />排球</label> 
<label><input name="ball" type="checkbox" value="badminton" />乒乓球</label> 

1.3. 如何获取checkbox选中的值(两种方法)

1.3.1. 第一种

  使用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值提交
	})
}

1.3.2. 第二种

  使用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;

1.4. 判断某个checked是否被选中(两种方法)

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

1.4.1. 第一种

if ($("#checkbox-id").get(0).checked) {
    // do something
}
if ($("#checkbox-id")[0].checked) {
    // do something
}

1.4.2. 第二种

if($('#checkbox-id').is(':checked')) {
    // do something
}

1.4.3. 第三种

if ($('#checkbox-id').prop('checked')) {
    // do something
}

1.5. 设置复选框是否为选中的代码

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

1.6. 额外:获取选择 radio 的值

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

1.7. 动态添加复选框Checkbox

  首先,使用JS动态产生Checkbox可以采用如下类似的语句:

var checkBox=document.createElement("input");  
checkBox.setAttribute("type","checkbox");  
checkBox.setAttribute("id",'123456');  

  但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用

document.createTextNode('XXX')  

  方法来产生一个文本节点,放在checkbox后面
  如下代码,程序产生了一个checkbox和一个文本节点,并将它们放到一个li对象中,再将li对象添加到ul对象中:

var executerDiv=$("executerDiv");  
executerDiv.innerHTML="";  
var ul=document.createElement("ul");  
for(var i=0;i<tableDatas.length;i++){  
var arr=tableDatas[i];  
// 加入复选框  
var checkBox=document.createElement("input");  
checkBox.setAttribute("type","checkbox");  
checkBox.setAttribute("id",arr[0]);  
checkBox.setAttribute("name", arr[1]);  
var li=document.createElement("li");  
li.appendChild(checkBox);  
li.appendChild(document.createTextNode(arr[1]));  
ul.appendChild(li);  
}  
executerDiv.appendChild(ul);  
//by [url=http://www.jbxue.com]http://www.jbxue.com[/url]  

  以上代码中,将checkbox放到li和ul中,这样能起到良好的排列效果,UL和li设置的CSS样式如下:

#executerDiv {
}

#executerDiv ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    vertical-align: middle;
}

#executerDiv li {
    float: left;
    display: block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    text-decoration: none;
    text-align: left;
    background: #ffffff;
}  
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13603.html
标签
评论
发布的文章

JSON、Ajax

2024-07-27 22:07:31

JsonNode、ObjectNode和ArrayNode

2024-07-27 22:07:30

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!