Selecting multiple rows and updating fields dynamically based off of one click

I have a dynamically generated page that has multiple headings followed by multiple sets of collapse bootstrap menus. I need help in being able to click on "Delete" within multiple main headings and bolding the parent items ("X" marks) plus adding a value of "1" within the input field so I which items to delete. However I also need to be able to toggle the delete off and on individual "X" marks.


<div class="heading">
Heading Title 1
<div class="pull-right">
	<a href="#">Delete</a>
</div>
</div>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_1" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_2" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_3" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


<div class="heading">
Heading Title 2
<div class="pull-right">
	<a href="#">Delete</a>
</div>
</div>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_4" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_5" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
          <div class="delete">
          	X
          </div>
          <input type="hidden" id="record_id_6" value="0">
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Open in new window

brihol44Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

stergiumCommented:
Hello.
I am a bit confused on the delete and the X mark. The following should run on the end of your page.

$('div.delete').click(function(){
$(this).parent().find('input').val(1);
$(this).parent().css('font-weight','bold');
});

Open in new window


By clicking on the X , with class delete, i change the input value to 1 and setting bold on the parent div.
hope that helps
0
Chris StanyonWebDevCommented:
This should do it. It will toggle the value from 0/1 and the weight from normal/bold

$('div.delete').click(function(e) {
    input = $(this).parent().find('input');
    value = (input.val() == 0) ? 1 : 0;
    weight = (input.val() == 0) ? 'bold' : 'normal';

    $(this).css('font-weight',weight);
    input.val(value);
});

Open in new window

0
brihol44Author Commented:
I see the individual "X" delete works when I click on the "X" mark but when I click on the main title delete button none of the parent "X" marks or input fields fill in with 1

http://jsfiddle.net/h5K7L/

<div class="heading">
Heading Title 1
<div class="delete pull-right">
      <a href="#">Delete</a>
</div>
</div>
0
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Chris StanyonWebDevCommented:
The 'Delete' link has no parent rows, so I'm assuming you mean the rows from the following 'panel-group'. You'll need 2 functions - one for the X clicks and one for the Delete clicks. Based on your HTML, this will do it:

$('.pull-right a').click(function(e) {
    e.preventDefault();
    $(this).parents('.heading').next('.panel-group').find('.panel-title').each(function() {
        $('.delete', this).css('font-weight','bold');
        $('input', this).val(1);
    });
});

$('div.delete').click(function(e) {
    input = $(this).parent().find('input');
    value = (input.val() == 0) ? 1 : 0;
    weight = (input.val() == 0) ? 'bold' : 'normal';

    $(this).css('font-weight',weight);
    input.val(value);
});

Open in new window

0
brihol44Author Commented:
Ok, cool. I just have two issues and I tried doing this myself but for someone who could get this done in a second I thought I would ask...

http://jsfiddle.net/z2fQP/

I modified/cleaned it up a little but the one last thing I need to be able to do is toggle a input at the main heading area now in case I also want to delete the main category as well.

<a href="#">Delete</a> <input id="cat_1" type="text" value="">

So if I click the main "Delete" link at the header area it toggle them all 0 : 1 but the main toggle at the title should also fill in 0 : 1 based off the current value. I spent some time trying to do this but there's something I'm not quite getting. thx
0
Chris StanyonWebDevCommented:
OK. You've changed the code around slightly so now clicking on the Delete link won't toggle the bold on and off, and it toggles the values individually from 0:1, rather than toggle them all at the same time, so if you have values of 0:1:0 the toggle will switch them to 1:0:1 - is that what you intended. You also have several element in your page with the same ID - IDs need to be unique. You should probably switch to classes (div class="group")

I've updated the fiddle to toggle the new input so have a play:

http://jsfiddle.net/ChrisStanyon/z2fQP/1/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brihol44Author Commented:
Thanks! Awesome
0
brihol44Author Commented:
Hi Chris, looks like I needed to change this up a little using checkboxes so I can filter out just the checked values instead of all of them. I've tried to work this in but I can't seem to see where I'm going wrong. If I need to re-post for points no problem.

I added in checkboxes but I will end up hiding those anyways. I just have them visible for testing.

1. I basically need the exact same functionality as before but the checkboxes just checked instead of 0 or 1. And of course the individual checking which doesn't seem to be working as well.

Thanks for the help,

http://jsfiddle.net/Lrg3M/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.