vincej
1 month ago

How to manipulate checkboxes with Javascript / Jquery

Posted 1 month ago by vincej

Hi!

I'm really close to solving this, but just can't get over the finish line. I have not found anything on SO or Medium which has helped.

I have a series of checkboxes in rows which log the time a person arrives and when a person leaves. Check out this image to get an understanding of what is going on:

https://drive.google.com/file/d/1-33bGrfGsnDVEYtToWbR-6Q6JndOfRRy/view?usp=sharing

Ok - so when a person arrives, the user clicks the checkbox and a Time is overlayed on that <td> Similarly when the person leaves, a later time is overlayed on that <td> and the time difference is captured. Several more people arrive and they all get their arrival time. This works fine.

The Objective: When you wish to reset a specific row, then ONLY that row is reset to the original checkbox, and the refreshed checkbox is ready to create a new time.

The Problem Described: First, when clicking "reset", ALL the checkboxes are being reset to a checkbox. This is probably because the reset function is targeting a class shared by all the rows. I realise that is wrong. Secondly, when you then check the box, I am not getting a fresh time up, but rather just a tick. New image:

https://drive.google.com/file/d/1NP_wIB5zroW7TsuLFuRzR7C7nt5OPVQ5/view?usp=sharing

There's More: So, if you should carry on clicking those boxes which were not previously reset you will still get a Time.

https://drive.google.com/file/d/1sa-6HWbnKf5XhmQb-7ndFMcA1Z2D3I6t/view?usp=sharing

My Code / What I have Done So Far: Ok, so first off, apologies to all those who hate Laravel Collective. I have added the subject's ID into the checkbox and the reset button in my view. This should allow me to isolate the specific row:

<td class="checkboxIn" >{{Form::checkbox('timeIn',$child->child_id,false)}}</td>
 <td><button type="button" class="timeInReset btn btn-light"value={{$child->child_id}}>Reset</button></td>

So, in the checkbox, I can now have JQuery grab the child_id as an attribute. This fine. However, my Reset function below, I know is completely wrong. Here is where I need your advice! Sorry for the long explanation. MANY THANKS!

Here is the JQuery:

   att = ''

    // this presents today's date on the registration form
    $("#todayDate").text(moment().format("ddd, MMM Do YYYY"));

    //This calculates the time for the checkboxes and adds it to the closest td//
    $("input:checkbox[name=timeIn]").on('click', function () {
       att =  $("input:checkbox[name=timeIn]").attr('value');
       $(this).closest("td").text(moment().format("h:mm a")).addClass("timeInserted").attr('id',att);
       console.log(att);// THIS CONFIRMS THE TIME. 
    });

    // I USE A FUNCTION, SO I CAN REPEAT THE EVENT WITH EVERY CLICK
    $(".timeInReset").click(function(){   
        reset(att);  
    })

    function reset(){
     $(".timeInserted").html("<input type=checkbox name=test1 value=att >"); // THIS IS WRONG !! 
       }


Please sign in or create an account to participate in this conversation.