js实现选中跟取消选择的操作

JavaScript029

js实现选中跟取消选择的操作,第1张

经常会遇到选择多个数据中的某条数据，然后再取消选择，如下图

以前我一般会给每条数据加条状态，checked，每次点击去取反，后面发现另外一个方法，不需要加状态就能实现，这样对数据少循环（加状态）了一次

html

data

js

取消选择只要判断这次的id跟上次存的id是否一样，不一样就赋值，一样就清空，这样在dom里面的判断就false，就不会加选中的样式了，比之前加状态少了一次遍历，只是在赋值这边多了个判断

Html:<input type="radio" name="radio" value='0' id="en" onclick="chkRadio(this)" />

Js:var flag = true

function chkRadio(id) {

id.checked = flag

flag = !flag

}

进阶：功能：类似于一个协议。当用户点击同意时，用户才能点击提交按钮。

Html:<input type="submit" class="pub_btn fabu1" value="确认发布" id="fabu" disabled="disabled" style="position: fixedbottom:0pxbackground-color: #6683ff" />

Js: <script language="JavaScript">

var flag = true

function chkRadio(id) {

var c=document.getElementById('en').value

if(c==0){

var obj=document.getElementById('fabu')

obj.removeAttribute('disabled')

document.getElementById('en').value=1

}else{

var obj=document.getElementById('fabu')

obj.setAttribute("disabled","disabled")

document.getElementById('en').value=0

}

id.checked = flag

flag = !flag

}

</script>

给定的初始值。input中是为点击。value=0。当第一次点击时删除disabled的属性，这样用户可以点击提交。根据value进行判断。