0

以下のフォームでは、ユーザーがスポーツを選択すると、動的に追加されます。スポーツがすでに存在する場合、それを再度追加できないコードを実装しました。私が理解できないのは、ユーザーがスポーツのチェックを外した場合、それをリストと配列から削除して、ユーザーが再びスポーツを追加できるようにすることです。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Item listing</title>
</head>
<body>
 <form action="test.htm" method="get">
    <select name="mylist" id="myList">
      <option id="1">Baseball</option>
      <option id="2">Soccer</option>
      <option id="3">Basketball</option>
      <option id="4">Volleyball</option>
      <option id="5">Hockey</option>
      <option id="6">Football</option>
      <option id="7">Rugby</option>
      </select>
  <br />
  <div id="sList">
  </div>
  <br />
  <input type="submit" value="Submit" />
  </form>
<script type="text/javascript">
    //add item when selected
    //a sport can not be added twice
    var allVals = [];
    $('#myList').change(function () {
        if ($.inArray(this.value, allVals) == -1) {
            allVals.push($(this).val());
            document.getElementById("sList").innerHTML += "<input checked =\"checked\" id=\"wList\" name=\"wList[]\" type=\"checkbox\" value=\"" + this.value + "\">" + this.value + "<br />";
        }
    });

    //remove sport when unchecked
    $('#wList').change(function () {
       //???
    });

    //submit should send checked sports

</script>
</body>
</html>
4

1 に答える 1

1

リストからアイテムを削除する方法は次のとおりです。コードにいくつかの変更を加えたことに注意してください...チェックボックスIDをクラスに変更しました--IDは一意である必要があります。チェックボックスの周りにラベルを追加して、チェックボックスにアクセスしやすくし、ラベルをクリックできるようにしました。
入力後にタグを削除しました。代わりにCSSを使用して、フォーマットを簡単にし、必要なjQueryを簡素化します。

http://jsfiddle.net/j6G2Y/

//add item when selected
//a sport can not be added twice
var allVals = [];
$('#myList').change(function () {
  if ($.inArray(this.value, allVals) == -1) {
    allVals.push($(this).val());
    document.getElementById("sList").innerHTML += "<label class=\"wList\"><input checked =\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\"" + this.value + "\"> " + this.value + "</label>";
  }
});

//remove sport when unchecked
$(document).on("change", ".wList-chk", function () {
  if ($(this).attr('checked')) {
    return;
  } else {
    $(this).parent('.wList').remove();
  }
});

//submit should send checked sports

次のようなものを使用して、配列からアイテムを削除できるはずです。

http://jsfiddle.net/j6G2Y/1/

//remove sport when unchecked
$(document).on("change", ".wList-chk", function () {
  if ($(this).attr('checked')) {
    return;
  } else {
    var thisVal = $(this).val();
    var index= $.inArray(thisVal, allVals);

    allVals.splice(index,1); alert(allVals);

    $(this).parent('.wList').remove();
  }
});

アレイを監視するために、いくつかのアラートを残しました。

于 2013-01-15T20:28:02.103 に答える