fanxin_942317684
codedvalue
2018-08-01 08:12
采纳率: 80%
浏览 763
已采纳

请问怎样实现多选框的全部取消功能

有一组15选项的多选框,分别是数字1-14与 无,怎样实现点无1-14全部都被取消选
中,然后在点1-14之间任意一个无就会被取消

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

10条回答 默认 最新

  • jslang
    天际的海浪 2018-08-01 08:39
    已采纳
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <div class="box">
        <input type="checkbox" name="a1" value="1">1<br>
        <input type="checkbox" name="a2" value="2">2<br>
        <input type="checkbox" name="a3" value="3">3<br>
        <input type="checkbox" name="a4" value="4">4<br>
        <input type="checkbox" name="a5" value="5">5<br>
        <input type="checkbox" name="a6" value="6">6<br>
        <input type="checkbox" name="a7" value="7">7<br>
        <input type="checkbox" name="a8" value="8">8<br>
        <input type="checkbox" name="a9" value="9">9<br>
        <input type="checkbox" name="a10" value="10">10<br>
        <input type="checkbox" name="a11" value="11">11<br>
        <input type="checkbox" name="a12" value="12">12<br>
        <input type="checkbox" name="a13" value="13">13<br>
        <input type="checkbox" name="a14" value="14">14<br>
        <input type="checkbox" name="null" value="">无<br>
    </div>
    <script type="text/javascript">
    $(function(){
        $(".box input[name^=a]").change(function(event){
            $(".box input[name=null]").prop("checked",false);
        });
        $(".box input[name=null]").change(function(event){
            $(".box input[name^=a]").prop("checked",false);
        });
    });
    </script>
    
    点赞 评论
  • MrXuesk
    MrXuesk 2018-08-01 08:39

    //无
    js中
    $("#che").click(function() {
    if($(this).is(":checked")){
    $('input[type=checkbox]:gt(0)').attr("checked",true);
    }else{
    $('input[type=checkbox]:gt(0)').attr("checked",false);
    }
            });
    
    点赞 评论
  • qzy623569881
    萌萌小么么 2018-08-01 08:48

    把name全改一样的 都是 a1
    多加一个全选框
    onclick="changecheckBox(this.checked);">
    写单击事件:

    function changecheckBox(check) {
    $("input[name='a1']").attr("checked", check);
    }

    点赞 评论
  • jslang
    天际的海浪 2018-08-01 09:09

    name需要相同的话,可以用class选择元素

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title> 页面名称 </title>
    </head>
    <body>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <div class="box">
        <input type="checkbox" class="text" name="a" value="1">1<br>
        <input type="checkbox" class="text" name="a" value="2">2<br>
        <input type="checkbox" class="text" name="a" value="3">3<br>
        <input type="checkbox" class="text" name="a" value="4">4<br>
        <input type="checkbox" class="text" name="a" value="5">5<br>
        <input type="checkbox" class="text" name="a" value="6">6<br>
        <input type="checkbox" class="text" name="a" value="7">7<br>
        <input type="checkbox" class="text" name="a" value="8">8<br>
        <input type="checkbox" class="text" name="a" value="9">9<br>
        <input type="checkbox" class="text" name="a" value="10">10<br>
        <input type="checkbox" class="text" name="a" value="11">11<br>
        <input type="checkbox" class="text" name="a" value="12">12<br>
        <input type="checkbox" class="text" name="a" value="13">13<br>
        <input type="checkbox" class="text" name="a" value="14">14<br>
        <input type="checkbox" class="null" name="a" value="无">无<br>
    </div>
    <script type="text/javascript">
    $(function(){
        $(".text").change(function(event){
            $(".null").prop("checked",false);
        });
        $(".null").change(function(event){
            $(".text").prop("checked",false);
        });
    });
    </script>
    </body>
    </html> 
    
    点赞 评论
  • gaojiajie333
    gaojiajie333 2018-08-01 09:12

    //纯js和html代码
    <!DOCTYPE html>




    <br> #times {<br> width: 160px;<br> height: 30px;<br> border: 2px solid red;<br> }<br>
    <br> function SelectNO() {<br> // 获取要操作的复选框<br> if (document.getElementsByName(&quot;noCheck&quot;)[0].checked == true) {</p> <pre><code> var box2 = document.getElementsByName(&quot;love&quot;); //checked判断是否选中 for (var x = 0; x &lt; box2.length; x++) { var value1 = box2[x]; value1.checked = false; } } } //checked判断是否选中 function SelectOne() { var box2 = document.getElementsByName(&quot;love&quot;); for (var x = 0; x &lt; box2.length; x++) { var value1 = box2[x]; if (value1.checked == true) { document.getElementsByName(&quot;noCheck&quot;)[0].checked = false; } } } &lt;/script&gt; </code></pre> <p></head></p> <p><body><br> <input type="checkbox" name="love" onclick="SelectOne();" />1<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />2<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />3<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />4<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />5<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />6<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />7<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />8<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />9<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />10<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />11<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />12<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />13<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />14<br> <br/><br> <input type="checkbox" name="noCheck" onclick="SelectNO();" />全不选<br> <br/></p> <p></body></p> <p></html></p>
    点赞 评论
  • gaojiajie333
    gaojiajie333 2018-08-01 09:16




    <br> #times {<br> width: 160px;<br> height: 30px;<br> border: 2px solid red;<br> }<br>
    <br> function SelectNO() {<br> if (document.getElementsByName(&quot;noCheck&quot;)[0].checked == true) {</p> <pre><code> var box2 = document.getElementsByName(&quot;love&quot;); for (var x = 0; x &lt; box2.length; x++) { var value1 = box2[x]; value1.checked = false; } } } function SelectOne() { var box2 = document.getElementsByName(&quot;love&quot;); for (var x = 0; x &lt; box2.length; x++) { var value1 = box2[x]; if (value1.checked == true) { document.getElementsByName(&quot;noCheck&quot;)[0].checked = false; } } } &lt;/script&gt; </code></pre> <p></head></p> <p><body><br> <input type="checkbox" name="love" onclick="SelectOne();" />1<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />2<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />3<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />4<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />5<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />6<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />7<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />8<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />9<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />10<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />11<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />12<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />13<br> <br/><br> <input type="checkbox" name="love" onclick="SelectOne();" />14<br> <br/><br> <input type="checkbox" name="noCheck" onclick="SelectNO();" />全不选<br> <br/></p> <p></body></p> <p></html></p> <pre><code> </code></pre>
    点赞 评论
  • bifuguo
    毕富国 2018-08-01 09:42

    以前做的小练习,参考一下
    javascript

     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>全选练习</title>
    </head>
    <body>
    
    <form>
      你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选
    
      <br/>
      <input type="checkbox" name="items" value="足球"/>足球
      <input type="checkbox" name="items" value="篮球"/>篮球
      <input type="checkbox" name="items" value="羽毛球"/>羽毛球
      <input type="checkbox" name="items" value="乒乓球"/>乒乓球
      <br/>
      <input type="button" id="checkedAllBtn" value="全 选"/>
      <input type="button" id="checkedNoBtn" value="全不选"/>
      <input type="button" id="checkedRevBtn" value="反 选"/>
      <input type="button" id="sendBtn" value="提 交"/>
    </form>
    
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
    <script type="text/javascript">
      /*
       功能说明:
       1. 点击'全选': 选中所有爱好
       2. 点击'全不选': 所有爱好都不勾选
       3. 点击'反选': 改变所有爱好的勾选状态
       4. 点击'提交': 提示所有勾选的爱好
       5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
       6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
       */
      var $checkedAllBox = $('#checkedAllBox')
      var $items = $(':checkbox[name=items]')
    
      // 1. 点击'全选': 选中所有爱好
      $('#checkedAllBtn').click(function () {
        $items.prop('checked', true)
        $checkedAllBox.prop('checked', true)
      })
    
      // 2. 点击'全不选': 所有爱好都不勾选
      $('#checkedNoBtn').click(function () {
        $items.prop('checked', false)
        $checkedAllBox.prop('checked', false)
      })
    
      // 3. 点击'反选': 改变所有爱好的勾选状态
      $('#checkedRevBtn').click(function () {
        $items.each(function () {
          this.checked = !this.checked
        })
        $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
      })
    
      //4. 点击'提交': 提示所有勾选的爱好
      $('#sendBtn').click(function () {
        $items.filter(':checked').each(function () {
          alert(this.value)
        })
      })
    
      // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
      $checkedAllBox.click(function () {
        $items.prop('checked', this.checked)
      })
    
      // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
      $items.click(function () {
        $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
      })
    </script>
    </body>
    
    </html>
    
    点赞 评论
  • hu_belif
    huwao 2018-08-01 13:58

    给那哥‘无’添加一个点击事件就行,在触发的函数中添加一个取消复选框全选的功能。可以参考:https://blog.csdn.net/hu_belif/article/details/80907771

    点赞 评论
  • Heart_Blade
    Heart_Blade 2018-08-02 01:12

    我有完整的实现代码,看这里!!!

    第一步:新建一个html文件,编辑代码如下:

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/全选全不选.js"></script>
    </head>
    <body>
        <div align="center">
            <table border="2">
                <tr>
                    <th>全选<input type="checkbox" id="all" onclick="checkAll(this.checked)"/></th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                </tr>
                <tr>
                    <td><input type="checkbox" name="one" onclick="checkOne()"/></td>
                    <td>苹果</td>
                    <td>2.50</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="one" onclick="checkOne()"/></td>
                    <td>电视</td>
                    <td>9999.00</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="one" onclick="checkOne()"/></td>
                    <td>航母</td>
                    <td>1000000000.00</td>
                </tr>
            </table>
    
        </div>
    </body>
    </html>
    

    第二步:新建一个js文件,实现全选全部选功能,编辑代码如下(注意上面的html代码中js的引用路径要是这个js文件路径):

     /**
     * Created by Administrator on 2018/6/19.
     */
    //所有name为one的元素的checked属性的值与flag相同
    function checkAll(flag){
        var one = document.getElementsByName("one");
        for(var i=0;i<one.length;i++){
            one[i].checked = flag;
        }
    }
    //只要name为one的元素中有一个未选中,则all元素的checked为false
    function checkOne(){
        var one = document.getElementsByName("one");
        var all = document.getElementById("all");
        all.checked = true;
        for(var i=0;i<one.length;i++){
            if(one[i].checked==false){
                all.checked = false;
            }
        }
    }
    
    点赞 评论
  • weixin_43550157
    charself 2020-04-20 17:05

    $("input[name='a']").bind("click",function(){
    var a=document.getElementsByName("a");
    // alert($(this).attr("id"));
    if($(this).attr("id")=="无的id"){
    for(i=a.length-2;i>=0;i--)
    {
    a[i].checked=false;
    }
    }else{
    a[a.length-1].checked=false;
    }
    });
    /**
    a[a.length-1]是无
    */

    点赞 评论

相关推荐