CODEWITHSUNDEEP
javascriptjquerycheckboxonclick
user3282988
user3282988

Reputation: 129

pass variables from checkboxes to an onclick function

I've created a table and each row as a checkbox. What i'm trying to do is when someone checks one or more rows a garbage can icon appears. Clicking on the garbage can deletes the chosen rows.

This is the code i wrote so far:

The div where the garbage can appears:

<div class="hidden" id="adminPanelShow">
      <img src="../images/garbage.jpg" class="adminPanelIcons"/><br>
      <img class="hrLine" src="images/line.png"/>
</div>

The Table:

<table>
         <tr><td><input type = "checkbox" name="idPriv[]" id="idPriv"  onclick="evaluateIT(this)" data-related-item="adminPanelShow" value ="<?php echo $value["id"]?>" /></td>
             <td><input type="text" name="userName[]" id="userName" class="adminPanel" value="<?php echo $value["userName"]?>"/></td>
             <td><input  name="firstName[]" type="text" id="firstName" class="adminPanel" value="<?php echo $value["firstName"]?>"/></td>
             <td><input  name="lastName[]" type="text" id="lastName" class="adminPanel" value="<?php echo $value["lastName"]?>"/></td>
         </tr>
</table>

The javascript code:

function evaluateIT(obj){

    var item = $(obj);
    var relatedItem = $("#" + item.attr("data-related-item"));
    var length = $("input:checked").length;

    if(item.is(":checked") )
        relatedItem.fadeIn();
    else if(item.not(":checked") && length == 0)
        relatedItem.fadeOut();   

}

Now, everything is working good, But how can i pass the values (id numbers..) from the selected checkboxes into an onclick function of the garbage can? That means, I want that each time i click the garbage can i can do some operations with the values of the chosen checkboxes.

Upvotes: 2

Views: 4348

Answers (1)

spiderman
spiderman

Reputation: 11132

I think when you said "everything is working good", you meant to say the code till garbage-can display is working, but not the implementation of garbage-can functionality. I assume this from the javascript function that you have. Please be more clear which will enable people to help you.

Now,

Look at this example, and you can implement on your case. I tried this, and it works

HTML:

<div id="garbagecan" style="border: 1px solid red">garbagecan</div>
<ul id="books">

    <li><input id="book1" value="book1" type="checkbox"><span>Book1</span>
    </li>
    <li><input id="book2" value="book2" type="checkbox"><span>Book2</span>
    </li>
    <li><input id="book3" value="book3" type="checkbox"><span>Book3</span>
    </li>
    <li><input id="book4" value="book4" type="checkbox"><span>Book4</span>
    </li>
</ul>

Javascript code [using jquery]

$(document).ready(function($) {

    $("#garbagecan").hide();

    $("#garbagecan").click(function() {
        var selectedIds = $("#books :checkbox:checked").map(function() {
            return $(this).val();
        }).get();
        alert(selectedIds);

    });

    $("#books :checkbox").click(function() {

        if ($("#books :checkbox:checked").length > 0) {
            $("#garbagecan").show();
        } else {
            $("#garbagecan").hide();
        }
    });
});

What this does: The garbage can div will be hidden until you select atleast one checkbox. When you have selected a minimum of one checkbox, and when you click the garbage can, i am alerting the array of selected values. When you call the .get() method, the resultant jquery object is converted to an array.

Hope this helps.

Upvotes: 1

Related Questions