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

    html

    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 html

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