locked
jQuery checkbox checked and change previous element RRS feed

  • Question

  • User-1952516322 posted

    Hello,

    I need your help, I have this table and this design:

    Table Design

    Note: I fill the table with dynamic element like this.

    $("#btn_save").click(function () {
    $("#table1").append('<tr id="tr_' + forLopp + '">' + '<td style="text-align:center" id="td_' + forLopp + '">' + '&lt;input type="checkbox" id="chekBox_' + forLopp + '" onclick="Delete()" />' + '</td>' +

    '<td style="text-align:center" id="txt_task_' + forLopp + '">' + $("#txt_task_title").val() + '</td>' +

    '<td style="text-align:center" id="ddp_' + forLopp + '">' + $('#DDP_task_prio option:selected').text() + '</td>' +

    '<td style="text-align:center" id="task_date' + forLopp + '">' + $("#txt_task_date").val() + '</td>' +

    '<td style="text-align:center" id="state_' + forLopp + '">' + "Open" + '</td>' +

    '<td style="text-align:center" id="checComptd' + forLopp + '">' + 'input type="checkbox" id="complete_' + forLopp + '" onchange="Complete()"/>' + '</td></tr>');
    forLopp++;
    });

    My Code - ForLoop


    what I need .... I want this case: when user checked the checkbox; the text of previous td ("Status") change to "Close", if the user again uncheck, change the text to "Open".

    but I want to try it on this code.

    I try this

    I used onchange()

    how can I edit or modify on any cell I want on table with his index ??? how can I search for it, [ prev(), parent(), index() ] how can I used this function?

    Thank you.

    Tuesday, August 16, 2016 6:59 AM

Answers

  • User-1496088595 posted

    Yes that is true, for your requirement you are adding element dynamically and the change event that we are binding is on load, so whichever element are exist at the time load only that will subscribe the change event.

    For dynamic element addition you need to bind change event after the controls added dynamically i.e. in your case it should be in  

    $("#btn_save").click(function () {
    
       .
       .
       .
       bindChangeEvent();
    });
    
    function bindChangeEvent(){
        $('input[type="checkbox"]').change(function(){
            if($(this).is(':checked')){
       	   $(this).parent('td').parent('tr').find('[data-column="status"]').html('Close');
            }
            else{
               $(this).parent('td').parent('tr').find('[data-column="status"]').html('Open');
            }
    }

    See the sample: https://jsfiddle.net/52dgt9n6/1/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 18, 2016 4:24 AM

All replies

  • User-1142886626 posted

    Hi Khalid Salameh,

    It seems you want the status change to “close” when the checkbox were checked. If it is your issue, you could attach change event to checkbox, and then find the cell which name is “state” based on the current checkbox status on client-side change event.

    The following example is for your reference.

    $(function () {
              $("input:checkbox").change(function () {
                  var tuisre = $(this).is(":checked");
                  if (tuisre) {
                      $(this).parent().prev().eq(0).text("close");
                  } else {
                      $(this).parent().prev().eq(0).text("open");
                  }
              })
     })
    
    <body>
        <div>
           <table id="table1">
                <tr>
                    <th>Title</th>
                    <th>Priority</th>
                    <th>Due Date</th>
                    <th>status</th>
                    <th>Complete</th>
               </tr>
                <tr>
                    <td>DATE</td> 
                    <td>DATE</td>
                    <td>DATE</td>
                    <td>open</td>
                    <td><input id="Checkbox1" type="checkbox" /></td>
               </tr>
                <tr>
                    <td>DATE</td> 
                    <td>DATE</td>
                    <td>DATE</td>
                    <td>open</td>
                    <td><input id="Checkbox2" type="checkbox" /></td>
               </tr>
           </table>
        </div>
    </body>
    

    You could use F12 developer tools help you find the cell in current row of the page. Then, using jQuery Traversing Methods to locate it.

    For example parent(),prev(),etc. The parent method returns the direct parent element of the selected element. The prev() method returns the previous sibling element of the selected element.

    Best Regards,

    Ailleen



    Wednesday, August 17, 2016 5:54 AM
  • User-1496088595 posted

    you can use data-attributes to select the status column like below example.

    live example : https://jsfiddle.net/5n22z5bf/

    <table>
    <thead>
      <tr>
        <th>Select</th>
        <th>Title</th>
        <th>Priority</th>
        <th>Status</th>
      </tr>
    </thead>
    <tr>
      <td><input type="checkbox" /></td>
      <td>ABC</td>
      <td>ABC</td>
      <td data-column="status">Open</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>PQR</td>
      <td>PQR</td>
      <td data-column="status">Open</td>
    </tr>
    </table>

    $('input[type="checkbox"]').change(function(){
       if($(this).is(':checked')){
       	$(this).parent('td').parent('tr').find('[data-column="status"]').html('Close');
       }
       else{
            $(this).parent('td').parent('tr').find('[data-column="status"]').html('Open');
       }
    });

    Wednesday, August 17, 2016 6:02 AM
  • User-1952516322 posted

    Thank you, thank you very much Mr.Ailleen and Mr.HemantD

    I tried what you wrote, but didn't work when I create new element when user click on Save button like

    (       $("#table").append("<tr><td><input type='checkbox'></td><td data-column='status'></td>         ),

    I was created this checkbox and the table design dynamic, not direct in code.

    what is the problem?

    Wednesday, August 17, 2016 1:20 PM
  • User-1496088595 posted

    Yes that is true, for your requirement you are adding element dynamically and the change event that we are binding is on load, so whichever element are exist at the time load only that will subscribe the change event.

    For dynamic element addition you need to bind change event after the controls added dynamically i.e. in your case it should be in  

    $("#btn_save").click(function () {
    
       .
       .
       .
       bindChangeEvent();
    });
    
    function bindChangeEvent(){
        $('input[type="checkbox"]').change(function(){
            if($(this).is(':checked')){
       	   $(this).parent('td').parent('tr').find('[data-column="status"]').html('Close');
            }
            else{
               $(this).parent('td').parent('tr').find('[data-column="status"]').html('Open');
            }
    }

    See the sample: https://jsfiddle.net/52dgt9n6/1/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 18, 2016 4:24 AM
  • User-1952516322 posted

    HemantD

    Really thank you so much, you are awesome bro,, its work successfully after I create 

    and thank everybody

    Thursday, August 18, 2016 6:26 AM