首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >选中父div中的所有复选框,根据选择框值单击使用jQuery

选中父div中的所有复选框,根据选择框值单击使用jQuery
EN

Stack Overflow用户
提问于 2013-09-09 14:35:12
回答 2查看 5.7K关注 0票数 0

在这里我想解决两个问题,

  1. 我有一堆复选框,我想限制用户根据选择框值检查复选框。
  2. 有两个div.checkbox,我想选中所有复选框,同时根据选择框值单击父div。

从上面,我解决了第一个问题。

但是我怎么解决第二个问题呢?

演示:小提琴

代码语言:javascript
复制
<select id="count">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select><br/><br/>

<div class="checkbox" style='float:left;background:yellow;width:100px'>
  <input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
  <label for="checkbox-1">HTML</label>
  <br />
  <input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
  <label for="checkbox-2">CSS</label>
   <br /> 
    <input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
  <label for="checkbox-3">HTML</label>
  <br />
</div>

<div class="checkbox" style='float:left;margin-left:100px;background:brown;width:100px'>
  <input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
  <label for="checkbox-4">CSS</label>
    <br />
     <input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
  <label for="checkbox-5">HTML</label>
  <br />
  <input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
  <label for="checkbox-6">CSS</label>
</div>

jQuery

代码语言:javascript
复制
$(document).ready(function(){
    $('#count').on('change', function(){
        $('input[type=checkbox]').prop('checked', false);
    });

    $('input[type=checkbox]').on('change', function(){
        if($('input[type=checkbox]:checked').length > $('#count').val()){
            $(this).prop('checked', false);
        }
    });
});

有人能帮帮我吗。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-09-09 14:43:02

像这样吗?

代码语言:javascript
复制
   $('.checkbox').on('click', function (e) {
     if (e.target.className == "checkbox") {
         var cnt = $('input[type="checkbox"]:checked').length;
         var cntSel = $('select').val();
         var fin = cntSel - cnt;
         $(this).find('input[type="checkbox"]:lt(' + fin + ')').prop('checked', true);
     }
 });

演示

票数 3
EN

Stack Overflow用户

发布于 2013-09-09 14:48:51

演示

较短代码:)

代码语言:javascript
复制
$('input[type=checkbox]').on('change', function () {
        if ($('.checkbox').find('input[type=checkbox]').filter(':checked').length > $('#count').val()) {
            $(this).prop('checked', false);
        }
    });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18700715

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档