实现下面的例子
<input id="input" type="checkbox">篮球
<!-- 点击事件onclick
input输入框有checked,true表示选中,false表示没有选中
-->
<script>
var input=document.getElementById("input");
input.checked=false;
console.log(input.id)
</script>
<button id="all">全选</button>
<button id="notall">不选</button>
<button id="reverse">反选</button>
<div>
<input type="checkbox">足球
<input type="checkbox">蓝球
<input type="checkbox">乒乓球
<input type="checkbox">羽毛球
</div>
<script>
var all=document.getElementById("all");
var inputs=document.getElementsByTagName("input");
//1.对btn执行点击事件
all.onclick=function(){
//将所有的input的checked属性设置为true
for(var i=0;i<inputs.length;i++){
inputs[i].checked=true;
}
}
var all=document.getElementById("notall");
var inputs=document.getElementsByTagName("input");
//1.对btn执行点击事件
all.onclick=function(){
//将所有的input的checked属性设置为false
for(var i=0;i<inputs.length;i++){
inputs[i].checked=false;
}
}
var all=document.getElementById("reverse");
all.onclick=function(){
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].checked)
inputs[i].checked=(inputs[i].checked)?false:true;
}
}
</script>
实现:
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示
<div style="display: block;">
div</div>
<button id="btn">btn</button>
<script>
var div = document.getElementsByTagName("div")[0];
var btn = document.getElementById("btn");
btn.onclick = function () {
var d = div.style.display;
div.style.display = (d == "block") ? "none" : "block";
}
</script>
练习:隔行变色
<ul>
<li>1</li> <!--lis[0]-->
<li>2</li><!--lis[1]-->
<li>3</li><!--lis[2]-->
<li>4</li><!--lis[3]-->
<li>5</li><!--lis[4]-->
</ul>
<script>
// i%2 0%2-->0 1%2-->1 2%2-->0 3%2-->1 4%2-->0
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.backgroundColor="pink";
}
else{
lis[i].style.backgroundColor="blue";
}
}
</script>
练习:实现输入框设置输入字的数量
<p>还可以输入<em id="em" style="color:red;">0</em>/150</p>
<textarea id="txt" cols="30" rows="10"></textarea>
<script>
var txt = document.getElementById("txt");
var em = document.getElementById("em");
txt.onkeydown = function () {
var length = this.value.length;
if (em.innerHTML < 20) {
em.innerHTML = this.value.length;
}
else {
alert("不能再输入")
}
}
</script>