0

phpでajax、jquery、mysql、チェックボックスでデザインを作りました。それはそのようなものです：

チェックボックス付きのボックスがあります。そして、空の箱がもう一つあります。最初のボックスでチェックボックスをオンにすると、そのチェックボックスに関する情報が空のボックスに表示されます。しかし、別のチェックボックスをクリックすると、最初にクリックした情報が消え、現在の選択のみが表示されます。つまり、古いセレクションに新しいセレクションを追加したいということです。また、チェックボックスをオフにしたときに、2 番目のボックスの情報を削除するにはどうすればよいですか。ありがとうございました。

HTML コードは次のとおりです。

<div id="first_box"> 
  <label class='checkbox'>
     <input type='checkbox' id=1> 
         First checkbox
  </label>
  <label class='checkbox'>
     <input type='checkbox' id=2> 
         Second checkbox
  </label>
  <label class='checkbox'>
     <input type='checkbox' id=3> 
         Third checkbox
  </label>
</div>
<div id="second_box"> </div>

ここにjqueryコードがあります： 

$(document).ready(function() {

 $("#first_box input:checkbox").change(function() {

    if($(this).is(":checked")) { 

       $.post("/here/is/url", { strID:$(this).attr("id"), strState:"1" },
        function(data) {
         $("#second_box").html(data);
       });

  } else {
      $.ajax({
        url: 'here/is/url/',
        type: 'POST',
        data: { strID:$(this).attr("id"), strState:"0" }
      });
  }
 });    


});

ajax リクエストの php コードは次のとおりです。 

$strID    = $_POST['strID'];
$strState = $_POST['strState'];

    if ($strState) { //if checkbox is clicked

        //I fetch data about checkbox which is clicked
        $infos = $this->info_model->get_info_from_checkbox_id($strID);

        foreach ($infos as $info) {
            echo "<label class='checkbox'>
                <input type='checkbox'>".$info->information .
                "</label>"; 
        }
    } else {  // if it is unchecked

         // I do not know how to delete 

    }
4

2 に答える 2

2

古いものに新しい選択を追加したい。

コンテンツを置き換えるappend()代わりに使用できます。html()

$("#second_box").append(data);

チェックボックスをオフにしたときに、2 番目のボックスの情報を削除するにはどうすればよいですか。

empty()選択した要素の内容を削除するを使用できます。

$("#second_box").empty();
于 2012-07-24T08:44:26.957 に答える
1

または、クライアント側でさらに多くのことを行うこともできます。デモについては、こちらをご覧ください。

<div id="first_box"> 
  <label class='checkbox'>
    <input data-url="url1" data-id="1" type="checkbox"> First checkbox
  </label>

  <label class='checkbox'>
    <input data-url="url2" data-id="2" type="checkbox" > Second checkbox
  </label>

  <label class='checkbox'>
    <input data-url="url3" data-id="3" type="checkbox"> Third checkbox
  </label>

</div>

<div id="second_box"></div>​

JavaScript：

$(document).ready(function() {
    $("#first_box input:checkbox").change(function(e) {
        var $this = $(this);

        if (already_loaded()) {
            update_visibility();
        } else {
            load();
        }

        // END -- Functions

        function already_loaded() {
            return $this.data("loaded");
        }

        function is_loading() {
            return $this.data("loading");
        }

        function load() {
            if (!is_loading()) {
                $this.data("loading", true);
                var id = $this.data("id");
                $.post("url", { // or use $this.data("url") if you want individual URLs
                    strId: id
                }, function(data) {
                    $this.data("loaded", true);
                    $this.data("is_loading", false);
                    $("#second_box").append(data);
                    update_visibility();
                });
            }
        }

        function is_checked() {
            return $this.is(":checked");
        }

        function update_visibility() {
            var $info = $("#info-" + $this.data("id"));
            if (is_checked()) {
                $info.show();
            }
            else {
                $info.hide();
            }
        }
    });
    $("#first_box input:checkbox").data("loaded", false);
    $("#first_box input:checkbox").data("loading", false);
});​
于 2012-07-24T09:42:50.233 に答える