When selecting chekbox I need the phrase to be strikety. Follow img example

Asked

Viewed 57 times

-4

  • Design a nice Theme 2 mins
  • Make the Theme Responsive 4 hours
  • Let Theme Shine like a star 1 day
  • Let Theme Shine like a star 3 days
  • Check your messages and Notifications 1 week
  • Let Theme Shine like a star 1 Month
  • <ul class="todo-list">
                    <li>
                      <!-- drag handle -->
                      <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                          </span>
                      <!-- checkbox -->
                      <input type="checkbox" value="">
                      <!-- todo text -->
                      <span class="text">Design a nice theme</span>
                      <!-- Emphasis label -->
                      <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
                      <!-- General tools such as edit or delete-->
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>
                    <li>
                          <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                          </span>
                      <input type="checkbox" value="">
                      <span class="text">Make the theme responsive</span>
                      <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>
                    <li>
                      <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
                      <input type="checkbox" value="">
                      <span class="text">Let theme shine like a star</span>
                      <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>
                    <li>
                      <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
                      <input type="checkbox" value="">
                      <span class="text">Let theme shine like a star</span>
                      <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>
                    <li>
                      <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
                      <input type="checkbox" value="">
                      <span class="text">Check your messages and notifications</span>
                      <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>
                    <li>
                        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
                      <input type="checkbox" value="">
                      <span class="text">Let theme shine like a star</span>
                      <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
                      <div class="tools">
                        <i class="fa fa-edit"></i>
                        <i class="fa fa-trash-o"></i>
                      </div>
                    </li>
                  </ul>

    Imagem modelo de como deverá ficar

    2 answers

    0

    Based on your markup, you can use the input[type=checkbox]:checked ~ .text to define the stylization of the element with class text when the next checkbox is checked:

    input[type=checkbox]:checked ~ .text {
      color: #ccc;
      text-decoration: line-through
    }
    <ul class="todo-list">
      <li>
        <!-- drag handle -->
        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                          </span>
        <!-- checkbox -->
        <input type="checkbox" value="">
        <!-- todo text -->
        <span class="text">Design a nice theme</span>
        <!-- Emphasis label -->
        <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
        <!-- General tools such as edit or delete-->
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                          </span>
        <input type="checkbox" value="">
        <span class="text">Make the theme responsive</span>
        <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
        <input type="checkbox" value="">
        <span class="text">Let theme shine like a star</span>
        <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
        <input type="checkbox" value="">
        <span class="text">Let theme shine like a star</span>
        <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
        <input type="checkbox" value="">
        <span class="text">Check your messages and notifications</span>
        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
        <input type="checkbox" value="">
        <span class="text">Let theme shine like a star</span>
        <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
    </ul>

    0


    You can also use Javascript to manipulate the property textDecoration

    document.getElementById('texto').style.textDecoration = "line-through";
    <span id='texto'>Esse texto vai ser riscado!!!</span>

    In his example:

    document.querySelectorAll('input[type=checkbox]').forEach((elemento) => {
      elemento.addEventListener('change', (e) => {
        var span = e.target.parentNode.querySelector('.text');
        span.style.textDecoration = (e.target.checked) ? "line-through" : "";
       
      });
    });
    <ul class="todo-list">
      <li>
        <!-- drag handle -->
        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                          </span>
        <!-- checkbox -->
        <input type="checkbox" value="">
        <!-- todo text -->
        <span class="text">Design a nice theme</span>
        <!-- Emphasis label -->
        <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
        <!-- General tools such as edit or delete-->
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                            <i class="fa fa-ellipsis-v"></i>
                            <i class="fa fa-ellipsis-v"></i>
                          </span>
        <input type="checkbox" value="">
        <span class="text">Make the theme responsive</span>
        <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
        <input type="checkbox" value="">
        <span class="text">Let theme shine like a star</span>
        <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
        <input type="checkbox" value="">
        <span class="text">Let theme shine like a star</span>
        <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                        <i class="fa fa-ellipsis-v"></i>
                        <i class="fa fa-ellipsis-v"></i>
                      </span>
        <input type="checkbox" value="">
        <span class="text">Check your messages and notifications</span>
        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
      <li>
        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
        <input type="checkbox" value="">
        <span class="text">Let theme shine like a star</span>
        <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
        <div class="tools">
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash-o"></i>
        </div>
      </li>
    </ul>

    • 1

      I ran with js and it worked very well. Grateful!

    Browser other questions tagged

    You are not signed in. Login or sign up in order to post.