locked
batch image adding before an element RRS feed

  • Question

  • User450763225 posted

    I have bunch of checkbox, and I want add different images based on checked or unchecked. I have to manually update one by one so far in jquery, is there any simpler way

    <div id="checkbox">
      
      <input type="checkbox"  name="animal" id="letterchk1" />Your application form is incomplete <br />
    
              <input type="checkbox"  name="animal" id="letterchk2" />You did not provide the latest GIRO Instalment Plan<br />
    
    
              <input type="checkbox" name="animal" id="letterchk3" />You did not provide the latest Notice of Assessment (NOA)<br />
    
     
              <input type="checkbox" name="animal" id="letterchk4" />Your credit card account was blocked <br />
    
    
              <input type="checkbox" name="animal" id="letterchk5" />Your signature differs from the Bank’s record<br />
    
     
              <input type="checkbox" name="animal" id="letterchk6" />The last 3 digits of your account number differs from the instalment plan<br />
    
      
              <input type="checkbox" name="animal" id="letterchk7" />Notice of Assessment (NOA) due date expired before the deduction date (28th of the month)<br />
      </div>
    
    <button id="btnClick">Click me</button>
    
    <script>
        if ($('#letterchk1').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk1')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk1')
        }
        if ($('#letterchk2').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk2')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk2')
        }
        if ($('#letterchk3').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk3')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk3')
        }
        if ($('#letterchk4').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk4')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk4')
        }
        if ($('#letterchk5').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk5')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk5')
        }
        if ($('#letterchk6').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk6')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk6')
        }
        if ($('#letterchk7').is(":checked")){
          $('<img src="new tick.png" />').insertBefore('#letterchk7')
        }
        else{
          $('<img src="new cross.png" />').insertBefore('#letterchk7')
        }
    
    </script>

    Friday, August 5, 2016 8:46 AM

Answers

  • User2009744128 posted

    Hi sdnd2000,

    Use the following script:

    if($('input[type="checkbox"]').is(":checked"))
      {
        $('<img src="new tick.png" alt="correct" />').insertBefore('input[type="checkbox"]')
      }
      

    and do similarly for the cross image.

    Hope this helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 5, 2016 11:16 AM

All replies

  • User2009744128 posted

    Hi sdnd2000,

    Use the following script:

    if($('input[type="checkbox"]').is(":checked"))
      {
        $('<img src="new tick.png" alt="correct" />').insertBefore('input[type="checkbox"]')
      }
      

    and do similarly for the cross image.

    Hope this helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 5, 2016 11:16 AM
  • User61956409 posted

    Hi sdnd2000,

    You could iterate over checkboxes and append <img> dynamically, the following code is for your reference.

    $("input[type='checkbox']").each(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            $('<img src="new tick.png" />').insertBefore($(this));
        } else {
            $('<img src="new cross.png" />').insertBefore($(this));
        }
    })
    

    Best Regards,

    Fei Han

    Monday, August 8, 2016 5:51 AM