CODEWITHSUNDEEP
javascriptjqueryhtml
Keyur
Keyur

Reputation: 1111

jquery - attach/detach multiple divs onclick

I am trying to replace the content of the divs on checkbox's check/un-check events.

HTML:

<div class="checks">
        <input type="checkbox" class="section-1" value="section-1">check-1
        <input type="checkbox" class="section-2" value="section-2">check-2
        <input type="checkbox" class="section-3" value="section-3">check-3
        <input type="checkbox" class="section-4" value="section-4">check-4
        <input type="checkbox" class="section-5" value="section-5">check-5
        <input type="checkbox" class="section-6" value="section-6">check-6
        <input type="checkbox" class="section-7" value="section-7">check-7
    </div><br><br>
    <div class="divs">
        <div class="section-1">
            <div class="content-1">
                div-1
            </div>
        </div>
        <div class="section-2">
            <div class="content-2">
                div-2
            </div>
        </div>
        <div class="section-3">
            <div class="content-3">
                div-3
            </div>
        </div>
        <div class="section-4">
            <div class="content-4">
                div-4
            </div>
        </div>
        <div class="section-5">
            <div class="content-5">
                div-5
            </div>
        </div>
        <div class="section-6">
            <div class="content-6">
                div-6
            </div>
        </div>
        <div class="section-7">
            <div class="content-7">
                div-7
            </div>
        </div>
    </div>
    <div class="divs-back" style="display: none">
        <div class="section-1">
            <div class="content-1">
                div-1
            </div>
        </div>
        <div class="section-2">
            <div class="content-2">
                div-2
            </div>
        </div>
        <div class="section-3">
            <div class="content-3">
                div-3
            </div>
        </div>
        <div class="section-4">
            <div class="content-4">
                div-4
            </div>
        </div>
        <div class="section-5">
            <div class="content-5">
                div-5
            </div>
        </div>
        <div class="section-6">
            <div class="content-6">
                div-6
            </div>
        </div>
        <div class="section-7">
            <div class="content-7">
                div-7
            </div>
        </div>
    </div>

jQuery:

                $(":checkbox:lt(7)").prop("checked", true);
            var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
            var unArray = [];
            var unChecked = 0;
            $('input[type="checkbox"]').click(function () {
                if ($(this).prop('checked')) {
                    // Add the new element if checked:
                    if (array.indexOf($(this).val()) < 0) {
                        array.push($(this).val());
                        unChecked = unArray.slice(-1)[0];
                        unArray.splice(-1, 1);
                    }
                } else {
                    // Remove the element if unchecked:
                    if (array.indexOf($(this).val()) >= 0) {
                        array.splice(array.indexOf($(this).val()), 1);
                        unArray.push($(this).val());
                        unChecked = 0;
                    }
                }
                showHideDiv($(this).val(), unChecked);
                console.log(array);
                console.log(unArray);
            });

        function showHideDiv(value, unCheked) {
            console.log(unCheked);
            if (unCheked != '0') {
                $('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
            } else {
                $('.divs').find("." + value).html('');
            }
        }

It is replacing the contents successfully on first attempt. But on the second attempt, the positions of the div contents are changed so not getting the desired output.

jsfiddle: https://jsfiddle.net/2th5gmLa/

Edit: Actually, I don't want to just hide show. I want to replace the div content on last unchecked section. When I uncheck Section-1, Section-2, Section-3, then if we check section-1, then it should place in the DIV of the Section-3.

Upvotes: 0

Views: 82

Answers (2)

Rino Raj
Rino Raj

Reputation: 6264

Why your code is not working?

The issue is you are pushing element. The push() method adds new items to the end of an array, and returns the new length.

//array.push($(this).val());

remove this line

Change you have to make.

$('input[type="checkbox"]').click(function() {
    var unchkdArray = [];
    var chkdArrray = [];
  $('input[type="checkbox"]').map(function(){
    if ($(this).is(':checked')) {
       chkdArrray.push($(this).val())
    } else {
        unchkdArray.push($(this).val())
    }
  });
  
  var selected = $(this).val()
  
  if ($(this).is(':checked')) {
    $('div.' + selected).show()
  } else {
    $('div.' + selected).hide()
  }
});

Fiddle Demo

Upvotes: 1

Nofi
Nofi

Reputation: 2175

Try this...

Plunker Link

 $(":checkbox:lt(7)").prop("checked", true);
        var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
        var unArray = [];
        var unChecked = 0;
        $('input[type="checkbox"]').click(function () {

                    console.log($(this)['context']['className']);
                  $( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )


        });

Plunker Link

Upvotes: 0

Related Questions