用原生JS做input全选

思路:用document.getElementsByTagName方法选中所有的input,然后循环每一个input,如果其type=checkbox,则让该checked=check。

同理,全不选也是让该checked=flase 。

输入数字,获取数字的值,拼接成字符串,该字符串为input的id,然后通过document.getElementById的方法,让其checked=true。


<html>
    <head>
        <title>title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    head>
    <body>
        
        <p>headp>
        <ul>
            <li>JSli>
            <li>JQli>
            <li>HTMLli>
            <li>JAVAli>
            <li>PHPli>
        ul>
        <script type="text/javascript">
            var list = document.getElementsByTagName('li');
            li = list[0];
            document.write(list.length+'
'
); document.write(li.innerHTML+'
'
);
script> <form> 请选择你的爱好:<br> <input type="checkbox" id="hobby1">音乐 <input type="checkbox" id="hobby2">登山 <input type="checkbox" id="hobby3">游泳 <input type="checkbox" id="hobby4">阅读 <input type="checkbox" id="hobby5">打球 <input type="checkbox" id="hobby6">跑步<br> <input type="button" value="全选" onclick="checkall();"> <input type="button" value="全不选" onclick="clearall();"> <p>请输入您要选择的序号1-6p> <input type="text" id="wb"> <input type="button" value="确定" onclick="checkone();"> form> <script type="text/javascript"> function checkall(){ var hobby = document.getElementsByTagName('input'); for( var i = 0; i< hobby.length; i++){ if(hobby[i].type=='checkbox'){ hobby[i].checked='check'; } } }//第一个函数用于全选 function clearall(){ var hobby = document.getElementsByTagName('input'); for( var i = 0;iif(hobby[i].type=='checkbox'){ hobby[i].checked=false; } } }//第二个函数用于全不选 function checkone(){ var j = document.getElementById('wb').value; var str = 'hobby'+j; document.getElementById(str).checked = true; }//第三个函数用于选中输入的数字对应选项 script> body> html>

你可能感兴趣的:(用原生JS做input全选)