javascript - 从复选框添加/删除值

Question

所以我检查标准化以添加标准化库...

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

我检查了 jQuery，并在规范化后添加了 jQuery 源...

<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>

但是如果我取消选中标准化，我希望它删除标准化链接，如果我再次选中它，我想在 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" />

这就是应该发生的事情，但是当我添加 AngularJS，然后标准化时，它应该显示为这样......

<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" />

但我却得到......

<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" />

所以基本上我检查的内容是希望该库在我检查的其他库之后添加。

我的 jQuery 是...

// 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');
  });
});

我相信这可以在没有 Codemirror 的情况下发生，我相信这个问题的发生是因为我如何使用 jQuery 构建 html，但我不知道如何解决它。

$(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

不要每次都循环所有复选框，而应该查看单击的复选框是“选中”还是“未选中”。在此基础上添加或删除文本。

$(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>

注意:请注意 A. Wolff 的评论，您可能想将 AngularJS 添加为脚本...另外，在值中我替换了 <和>对于 <和>