从复选框添加/删除值

Question

So I check normalize to add normalize library...

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

I check jQuery and I add the jQuery source after normalize...

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after jQuery...

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

That's what's suppose to happen but instead when I add say AngularJS, and then normalize, it's suppose to show like this...

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

but instead I get....

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />

So basically what I check I want that library to add after the other libraries I check.

My jQuery is...

// Add/Remove Library from Checkbox
$(".check").on("change", function() {

  // Join All Checked Libraries
  $(".full-library-code").val(function() {
    return $.map($(".check:checked").next().next(), function (el) {
      return el.value;
    }).join('\n');
  });
});

I believe this can happen without Codemirror , and I believe this problem is happening because of how I have my html structured with my jQuery, but I have no idea how to solve it.

 $(document).ready(function() { // Add/Remove Library from Checkbox $(".check").on("change", function() { // Join All Checked Libraries $(".full-library-code").val(function() { return $.map($(".check:checked").next().next(), function (el) { return el.value; }).join('\\n'); }); }); }); 

 <link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label> <input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br> <input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label> <input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br> <input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label> <input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br> <textarea class="full-library-code" placeholder="full library's code"></textarea> 

Answer 1

Instead of looping all the checkboxes every time you should look if the clicked checkbox is 'checked' or 'unchecked'. Based on that, add or remove the text.

 $(document).ready(function() { $(".check").on("change", function() { var textarea = $('.full-library-code'); var value = $(this).nextAll('input:first').val() + '\\n'; if( $(this).prop('checked') == true ) textarea.val( textarea.val() + value ); else textarea.val( textarea.val().replace( value, "") ); }); }); 

 /* only for demo readability */ textarea { width: 500px; height: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label> <input type="text" class="hide" value='&lt;link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" /&gt;' /><br /> <input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label> <input type="text" class="hide" value='&lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;' /><br /> <input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label> <input type="text" class="hide" value='&lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" /&gt;' /><br /> <textarea class="full-library-code" placeholder="full library's code"></textarea> 

Note: please mind A. Wolff's comment, you probably want to add AngularJS as a script... also, in the values I replaced the < and > for < and >

Answer 2

If you're getting the element in reverse order, simply use the reverse() method before the join() , like so:

// Join All Checked Libraries
$(".full-library-code").val(function() {
  return $.map($(".check:checked").next().next(), function (el) {
     return el.value;
  }).reverse().join('\n');
});

Answer 3

What I understand from your question is that you want the later checked libraries to appear later in the textarea. Here is how you can do that

 $(".check").on("change", function() { var $textArea = $(".full-library-code"); var fullLibraryCode = $textArea.val(); var thisValue = $(this).next().next().val() + "\\n"; if (this.checked) { $textArea.val(fullLibraryCode + thisValue); } else { $textArea.val(fullLibraryCode.replace(thisValue, "")); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label> <input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /> <br> <input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label> <input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /> <br> <input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label> <input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /> <br> <textarea class="full-library-code" placeholder="full library's code"></textarea>