CODEWITHSUNDEEP
javascriptjquerycheckbox
Christopher A
Christopher A

Reputation: 153

Jquery checkboxes inside div

I have the current situation:

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button id="uncheckAllItem">
       <button id="checkAllItem">
    </div>
</div>

<div id="3">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button id="uncheckAllItem">
       <button id="checkAllItem">
    </div>
</div>

Each div with class row has 2 buttons select all and delete all. When I click on delete all button of the div with id 2, then all the checkboxes within this div must be unchecked. The same happens to the checkboxes of the div with id 3. Here is my code:

$('#uncheckAllItem').click(function() {
   $('#' + <?php echo $model->id ?> + ' input[name^=itemCheckBox]').attr('checked', false);
   return false;
});

The problem is that this code is unchecking/checking all the checkboxes both in div id 2 and div id 3. What's wrong with it?

Upvotes: 1

Views: 1089

Answers (4)

Alex Char
Alex Char

Reputation: 33218

You have some errors. Elements have to close. Also as mention ID must be unique, use classes instead. I suggest as solution to use an attribute check uncheck in your buttons element and check/uncheck checkboxes likes: 

$(".row button").on("click", function() {
  $(this).parent().find(":checkbox").prop("checked", $(this).attr("value") == "check");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="2">
  <div class="row">
    <input type="checkbox" name="itemCheckbox_1" />
    <input type="checkbox" name="itemCheckbox_1" />
    <button class="uncheckAllItem" value="uncheck">uncheck all</button>
    <button class="checkAllItem" value="check">check all</button>
  </div>
</div>

<div id="3">
  <div class="row">
    <input type="checkbox" name="itemCheckbox_1" />
    <input type="checkbox" name="itemCheckbox_1" />
    <button class="uncheckAllItem" value="uncheck">uncheck all</button>
    <button class="checkAllItem" value="check">check all</button>
  </div>
</div>

Upvotes: 2

TiiJ7
TiiJ7

Reputation: 3412

Firstly, like the other answers suggested, change the IDs to classes since IDs are supposed to be unique. Secondly, use prop() when setting a checkbox status rather than attr().

There are also a few other things, like the <button> tag should be closed and have the attribute type set to button. Alternatively, you can use <input type="button">, I've included both in the fiddle to show they work the same.

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button type="button" class="uncheckAllItem">Uncheck</button>
       <button type="button" class="checkAllItem">Check</button>
    </div>
</div>

$('.uncheckAllItem').click(function() {
    $(this).siblings(':checkbox').prop('checked',false);
});

http://jsfiddle.net/hLen8xqd/

Upvotes: 2

kaxi1993
kaxi1993

Reputation: 4700

first of all button ids must be unique you can write class instead

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">
    </div>
</div>

<div id="3">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">
    </div>
</div>

you can write simple

$('.uncheckAllItem').click(function() {
    $(this).siblings(':checkbox').attr('checked',false);
    return false;
});

Upvotes: 2

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

Change th id of your buttons to classes.

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">
    </div>

</div>

<div id="3">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">

    </div>

Then in your script,

$('.uncheckAllItem').click(function() {
   $(this).siblings(':checkbox').attr('checked',false);
return false;    });

This will bind the event to class named uncheckAllItems and find the div to be deleted and the uncheck it.

Upvotes: 2

Related Questions