以下是原生和jquery
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #tab{ width: 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; width: 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>