如何选中另一个复选框的更改复选框?

时间:2016-06-02 13:15:15

标签: javascript jquery html checkbox

我想检查父li中的用户选中复选框时的复选框。

所以这是我的HTML代码。

<ul>
    <li class="parent3 child2" id="3">
        <span style="padding-left:60px;">
            <i aria-hidden="true" class="icon-minus"></i>
            Civil
        </span>
        <div>
            <label class="viewList">
                <input type="checkbox" value="49" name="view[]">
                View
            </label>
            <label class="downList">
                <input type="checkbox" value="49" name="down[]">
                Download
            </label>
            <label class="upList">
                <input type="checkbox" value="49" name="update[]">
                Update
            </label>
        </div>
        <ul class="submenu" style="display: block;">
            <li class=" child3" id="4">
                <span style="padding-left:80px;">test1</span>
                <div>
                    <label class="viewList">
                        <input type="checkbox" value="60" name="view[]">
                        View
                    </label>
                    <label class="downList">
                        <input type="checkbox" value="60" name="down[]">
                        Download
                    </label>
                    <label class="upList">
                        <input type="checkbox" value="60" name="update[]">
                        Update
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

现在我要查看子复选框。

所以我尝试了以下代码。

$(document).ready(function(){
    $('.viewList input').change(function () {
        alert('hello')
        if ($(this).attr("checked")) {
            $(this).closest('li').children('.submenu .viewList input').prop( "checked", true );
            alert('hello')
        }
        // not checked
    }); 
});

这里也是jsfiddle,我也试过了。

任何帮助将不胜感激。感谢

5 个答案:

答案 0 :(得分:1)

试试这个..

$(document).ready(function(){
    $('[type="checkbox"]').change(function () {
        var checked = $(this).prop('checked');
        var cls = $(this).parent().attr('class'); //or 'viewList'      
        $('.'+cls).find('[type="checkbox"]').prop('checked', checked);
    }); 
});

答案 1 :(得分:1)

您需要使用sevral jQuery函数来实现相同的功能。 E.g with toupdate as ( select t.*, avg(average) over (partition by sampler order by createdon) as new_movingaverage from t ) update toupdate set movingaverage = new_movingaverage; parents()等......

您的更新代码应如下所示。

find

更新了jsFiddle链接:https://jsfiddle.net/xf6Lfu0v/12/

  

我们需要做的是,当我们先点击复选框时,我们会   检查是否有$(document).ready(function(){ $('.viewList input').change(function () { if($(this).parents('li').size()>0) { var parentLi=$(this).parents('li'); if(parentLi.find('ul').size()>0) { var childInput=parentLi.find('ul').find('.viewList input'); if($(this).is(":checked")){ childInput.prop('checked','checked'); } else { childInput.removeAttr('checked'); } } } }); }); 父母,如果是,那么我们会发现是否   里面有儿童UL。如果是,则选中/取消选中   相应的输入。

答案 2 :(得分:1)

$(document).ready替换为以下内容:

$(document).ready(function(){
    $('.viewList input').change(function () {
            //alert('hello')
            if ($(this).prop('checked')) {
                $('.submenu .viewList input').prop( 'checked', true );
                //alert('hello')
            }
            // not checked
        }); 
});

请注意我已发表评论提醒。

希望这会对你有所帮助。

答案 3 :(得分:1)

您可以使用元素具有相同名称的事实。

这就是代码:

$(document).ready(function(){
    $('input').change(function () {
               $("input[name='"+ $(this).attr('name')+"']").prop( "checked", $(this).prop('checked') );
            });

        }); 

Here你有一个工作小提琴。

答案 4 :(得分:0)

这项工作很好:

$(document).ready(function() {
  $('[type="checkbox"]').change(function() {
    var checked = $(this).attr('checked');
    var name = $(this).attr('name');
   $("[name= '"+ name + "']").attr('checked', checked);

  });
});

<强> JSFIDDLE