以下是原生和jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#tab{
300px;
margin: 30px auto;
}
.tab-nav{
display: flex;
}
.tab-nav a{
flex: 1;
line-height: 40px;
border: 1px solid #000;
text-align: center;
text-decoration: none;
color: #000;}
.tab-nav a.current{
color: #fff;
background: #000;
}
.content{
display: none;
100%;
height: 300px;
color: black;
box-sizing: border-box;
padding: 10px;}
.content.current{
display: block;
}
/*.content1{ background: #6fcaff; }*/
/*.content2{ background: #ffb3e6;}*/
/*.content3{ background: #e0bd7f;}*/
</style>
</head>
<body>
<div>
<input type='checkbox' value="苹果">苹果
<input type='checkbox' value="香蕉" class="banner">香蕉
<input type='checkbox' value="orange" class="orange" checked>桔子
<input type='checkbox' value="orange" class="orange" checked="checked">桔子
<input type='text' value="animal" class="dog" >dog
<input type='text' value='' class="cat" >cat
</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
document.getElementsByClassName('banner')[0].checked = true
document.getElementsByClassName('dog')[0].disabled = true
$('.banner').attr("checked", true); //或 $('.banner').attr("checked", "checked");
$('.dog').attr("disabled", true); //或 $('.dog').attr("disabled", "disabled");
$('.banner').prop("checked", true);
$('.dog').prop("disabled", true);
//jQuery获取选中的checkbox
$('input[type=checkbox]:checked');
</script>
</body>
</html>
vue下：
<div id="app"> <div slot="childSlot" @click="checkfun" >check按钮</div> <input type="checkbox" id="checkbox" :checked="checkSymbol"> <div @click="disabledfun" >disabled按钮</div> <input type="text" :disabled="disabledSymbol"> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { return{ checkSymbol: false, disabledSymbol: false } }， methods:{ checkfun(){ this.checkSymbol = true }, disabledfun(){ this.disabledSymbol = true } }) </script>