jQuery элемент переключения, если существует другой элемент

Question

РЕДАКТИРОВАТЬ У меня нет доступа к оригиналу HTML. Я могу только добавить jQuery на страницу.

Я пытался выяснить, как динамически отображать / скрывать элемент (div) на странице, если существует другой элемент (div). У меня есть флажок на странице, к которому добавляется класс при нажатии.

Код здесь - это то, что я думал, что хотел бы. Но он просто скрывает элемент, когда существует .is-check. Он не переключается снова.

$( document ).ready(function() {
if($('.is-checked').length){
   $('.fn_container_start').hide();
}
});

У меня уже есть флажок с классом .selectit, и когда вы щелкаете по нему, добавляется класс get, называемый .is-checked

I хотел бы, чтобы .is-check get добавлялся на страницу, где он скрывает класс .fn_container_start

Но также, когда .is-check отсутствует на странице, класс .fn_container_start должен быть снова скрыт.

Вот html для флажка до и после его нажатия

До того, как установлен флажок

<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>

После

<label class="selectit is-checked"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>

Возможно ли это?

Спасибо,

Мортен

Answer 1

function valueChanged(){
    if($('.toggle_check').is(":checked"))   {
        $('.fn_container_start').hide();
        $('.toggle_check').addClass('is-checked');
        }
    else{
        $('.fn_container_start').show();
        $('.toggle_check').removeClass('is-checked');
        }

}

<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157" onchange="valueChanged();"> Brushes</label>
<div class="fn_container_start">
  <p class="hide">div hides if the checkbox checked</p>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   

Answer 2

Используйте этот код

 <script type="text/javascript">
        $(document).ready(function() {

        $('input[type="checkbox"]').click(function() {

             $(".selectit").addClass("is-checked");

      });

    });
    </script>

Answer 3

Я думаю, вы можете использовать метод .hasClass

$( document ).ready(function() {
 $("#in-download_category-157").click(function() {
    $(".selectit").toggleClass("is-checked");
        if($('.selectit').hasClass('is-checked')){
            $('.fn_container_start').hide();
        }else{
            $('.fn_container_start').show();
        }
  });
});

Answer 4

$('.selectit input.toggle_check').on('change',function(){
    if($(this).is(":checked"))   {
        $('.fn_container_start').hide();
        $(this).addClass('is-checked');
        }
    else{
        $('.fn_container_start').show();
        $(this).removeClass('is-checked');
        }

})

<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157"> Brushes</label>
<div class="fn_container_start">
  <p class="hide">div hides if the checkbox checked</p>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 5

$( document ).ready(function() {
    $('.selectit').on('click', function(){
        $('.fn_container_start').toggleClass("hidden");
    });
});

.hidden{display:none !important;}
.fn_container_start{border:1px dashed red;}

<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>

<div class="fn_container_start">This div have .fn_container_start class</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>