javascript - Uncheck all checkboxes related to clicked button. -


the problem : have checkbox groups created dynamically. if @ least 1 checkbox checked title of group showing in page's top in separate div cross icon x. wanted on clicking each added title's cross x need uncheck checkboxes related title , remove title itself.

codepen example : https://codepen.io/gabe747/pen/jlaevq

$(document).ready(function() {    check()  });  $("input[type=checkbox]").change(function() {    check()  })    function check() {    $(".col-filter_amount").text("");      $(".col-filter_block").each(function() {      if ($(this).find("input[type=checkbox]:checked").length)        $(this).find(".cols-title").clone().append('<a class="checkbox-remover" href="javascript:;">x</a>').appendto($(".col-filter_amount"))    })  }    $(".checkbox-remover").on('click', function() {    //   remove title , uncheck related title checkboxes  });
.col-filter_amount {    border: 1px solid #ccc;  }    .col-filter_amount h4 {    background: #000;    color: #fff;    display: inline-block;    padding: 5px;    margin: 15px;  }    .col-filter_amount h4 {    color: fff;    text-decoration: none;    margin-left: 5px;    color: #000;    background: #fff;    border-radius: 50%;    padding: 1px 5px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="col-filter_amount">    </div>    <div class="col-filter_block">    <h4 class="cols-title" data-value="1">group1</h4>    <input type="checkbox" data-value="1">item1    <input type="checkbox" data-value="1">item2    <input type="checkbox" data-value="1">item3    <input type="checkbox" data-value="1">item4  </div>    <div class="col-filter_block">    <h4 class="cols-title" data-value="2">group2</h4>    <input type="checkbox" data-value="2">item1    <input type="checkbox" data-value="2">item2    <input type="checkbox" data-value="2">item3    <input type="checkbox" data-value="2">item4  </div>

thanks support!

because dynamically added element need listen click event on parent element exists, body example. can use data attribute select input elements same value.

$(document).ready(function() {    check()  });  $("input[type=checkbox]").change(function() {    check()  })    function check() {    $(".col-filter_amount").text("");      $(".col-filter_block").each(function() {      if ($(this).find("input[type=checkbox]:checked").length)        $(this).find(".cols-title").clone().append('<a class="checkbox-remover" href="javascript:;">x</a>').appendto($(".col-filter_amount"))    })  }    $('body').on('click', ".checkbox-remover",  function() {    $('input[data-value="'+$(this).parent().data('value')+'"]').attr('checked', false)    $(this).parent().remove()  });
.col-filter_amount {    border: 1px solid #ccc;  }    .col-filter_amount h4 {    background: #000;    color: #fff;    display: inline-block;    padding: 5px;    margin: 15px;  }    .col-filter_amount h4 {    color: fff;    text-decoration: none;    margin-left: 5px;    color: #000;    background: #fff;    border-radius: 50%;    padding: 1px 5px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="col-filter_amount">    </div>    <div class="col-filter_block">    <h4 class="cols-title" data-value="1">group1</h4>    <input type="checkbox" data-value="1">item1    <input type="checkbox" data-value="1">item2    <input type="checkbox" data-value="1">item3    <input type="checkbox" data-value="1">item4  </div>    <div class="col-filter_block">    <h4 class="cols-title" data-value="2">group2</h4>    <input type="checkbox" data-value="2">item1    <input type="checkbox" data-value="2">item2    <input type="checkbox" data-value="2">item3    <input type="checkbox" data-value="2">item4  </div>


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more