Флажок jquery, который скрывает конкретный div и проверяет все флажки внутри div

Как сделать так, чтобы флажки не устанавливались при запуске кода? У меня есть несколько div с флажками внутри них, и я хочу проверить флажки внутри каждого и одновременно скрыть конкретный div, но когда я его запускаю, все флажки проверяются:

HTML:

<input type="checkbox" id="hide-and-checked">group 1
<div id="one" class="hide-and-checked">
    <input type="checkbox" class="list_check" value="1">1
    <input type="checkbox" class="list_check" value="2">2
    <input type="checkbox" class="list_check" value="3">3</div>
<br>
<input type="checkbox" id="hide-and-checked">grup 2
<div id="two" class="hide-and-checked">
    <input type="checkbox" class="list2" value="1">1
    <input type="checkbox" class="list2" value="2">2</div>

JS:

$(document).ready(function () {
    function toggleDiv() {
        var $this = $(this);

        $("." + $this.attr('id'))[$this.is(':checked') ? 'hide' : 'show']();

        $(":checkbox").each(

        function () {
            $(this).attr('checked', true);
        });

    }
    $('input:checkbox').each(toggleDiv).click(toggleDiv);
});

Вот он сейчас: http://jsfiddle.net/oskar9/8k2HK/


checkbox html toggle jquery checked
person Oskar    schedule 29.06.2013    source источник
comment
Размещайте все html и jquery на странице jsfiddle.net/oskar9/8k2HK.   -  person Oskar    schedule 29.06.2013
comment
Во-первых, вы помните, что у каждого элемента свой идентификатор. Два элемента не могут иметь одинаковый идентификатор. В вашем коде оба флажка имеют одинаковый идентификатор   -  person S. S. Rawat    schedule 29.06.2013
comment
@oskar - это то, что вы ищете: jsfiddle.net/8k2HK/9   -  person Joe    schedule 29.06.2013
comment
почему ты меняешь свой ответ?   -  person S. S. Rawat    schedule 14.09.2013

Ответы (3)


arrow_upward
0
arrow_downward

Первый взгляд на вопрос побудил предложить event.preventDefault() из-за «предотвращения проверки флажков ..». Но позже читая это снова и снова, я понимаю, что вы хотите чего-то другого. «Проверка и сокрытие» на шаг впереди. Я подготовил для этого вопроса демонстрацию на jsFiddle. «верхние флажки» управляют «дополнительными флажками» с помощью:

$("input.upper-box").on("change", function() {
var $this = $(this); 
 $this.next("div.sub-group")
     .find(":checkbox")
     .prop("checked", $this.prop("checked"))
 .end()
 .toggle("slow"); 
});

Одно небольшое примечание о флажках, которые предлагает команда jquery, заключается в том, что вы должны использовать prop() вместо _ 4_, если вы настроили таргетинг ($ 1,6+).

person Fredrick Gauss    schedule 29.06.2013
comment
Спасибо всем, но ответ @Fredrick - это то, что я хочу :) - person Oskar; 14.09.2013
comment
@oskar, добро пожаловать. Вы можете увидеть, как это помогает, закомментировав компенсационную часть. И для тех, кто не видит никаких действий; выберите правильную библиотеку jQuery (проверено на версии 1.9.1 и onDomReady) - person Fredrick Gauss; 14.09.2013

arrow_upward
1
arrow_downward 

 <input type="checkbox" id="hide-and-checked" checked="true" /> group 1

 <div  id="one" class="hide-and-checked" >  
     <input type="checkbox" class="list_check" value="1"/>1
     <input type="checkbox" class="list_check" value="2"/>2
     <input type="checkbox" class="list_check" value="3"/>3
 </div>

<br />        
    <input type="checkbox" id="hide-and-checked"/> grup 2
 <div  id="two" class="hide-and-checked">

     <input type="checkbox" class="list2" value="1"/>1
     <input type="checkbox" class="list2" value="2"/>2

  </div>

сценарий

$(document).ready(function() {

    $('input[id="hide-and-checked"]').each(function(){

    $(this).change(function(){toggleOperation(this)});      
    toggleOperation(this);
});
function toggleOperation(ctrl)    
    {
        var $this = $(ctrl);        
        if($this.is(':checked'))
        {
           $this.next().find(":checkbox").attr("checked",true);
            $this.next().show();


        }
        else 
        {

            $this.next().hide();                     $this.next().find(":checkbox").attr("checked",false);
        }
    }

});

попробуйте этот код в ссылке ниже

http://jsfiddle.net/Bhaarat/8k2HK/13/

person Bhaarat    schedule 29.06.2013
comment
Отлично, пожалуйста. Если вы чувствуете, что получили свой ответ, отметьте сообщение как ответ или проголосуйте за него. - person Bhaarat; 01.07.2013

arrow_upward
0
arrow_downward

Try this jsfiddle.net/Subhash09/8k2HK/10/

person S. S. Rawat    schedule 29.06.2013