Question

这就像流程一样：

我首先导出checkbox的值并将值传递给函数以触发ajax。该ajax函数在选择框中返回多个组中的数据列表。每次选中复选框时，该值都将附加到选择框中。但是，当取消选中复选框时，我想从selectbox中删除该值。

现在，当我点击复选框时，无论我选中还是取消选中，该值都会传递给该函数。如何在这控制？

第一个脚本

<script>

    $("input[type=checkbox]").change(function() {  
        var selectedval = ($(this).val());
        var selectedtext =($(this).next().text());

       sendtobox(selectedval);

    });
</script>

第二个脚本（功能）

<script>
            var xmlhttp = false;
            try
            {
                xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
                //alert("javascript version greater than 5!");
            }
            catch(e)
            {
                try
                {
                    xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
                   // alert("you're using IE!");
                }
                catch(E)
                {
                    xmlhttp = new XMLHttpRequest();
                    //alert("non IE!");
                }
            }

            function sendtobox(param)
            {
                 xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (this.responseText !== null) {
            var ajaxElm = document.getElementById('show');
            ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML; // append in front
             }
                //document.getElementById("show").innerHTML = xmlhttp.responseText;
            }
            }

                 xmlhttp.open("GET","getuser.php?q="+param,true);
                 xmlhttp.send();

            }
        </script>

HTML

 <input type="checkbox" name="level" id="level" class="level" value="1"><label>Primary</label><br/>
                <input type="checkbox" name="level" id="level" class="level" value="2"><label>Upper Secondary</label><br/>
                <input type="checkbox" name="level" id="level" class="level" value="3"><label>University</label><br/>
                <input type="checkbox" name="level" id="level" class="level" value="4"><label>Lower Secondary</label><br/>
                <input type="checkbox" name="level" id="level" class="level" value="5"><label>Pre University</label><br/>
                <input type="checkbox" name="level" id="level" class="level" value="6"><label>Skills/Languages</label><br/>

getuser.php

<?php
 $q= intval($_GET['q']);

$con = mysqli_connect('localhost','root','','wordblend_db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"test_db");
//$sql="SELECT * FROM tbl_subjects WHERE level_id = '".$q."'";
$sql="SELECT * FROM tbl_levels,tbl_subjects WHERE tbl_levels.level_id=tbl_subjects.level_id AND tbl_levels.level_id='$q'";
$result = mysqli_query($con,$sql);

?>

<?php
while($row = mysqli_fetch_array($result)) {

    $levels=$row['level_name'];
    $subjects= $row['subject_name'];
    $subjects_id= $row['subject_id'];

    ?>

       <optgroup label="<?php echo $levels;?>">
            <option value="<?php echo $subjects_id;?>"><?php echo $subjects;?></option>
        </optgroup>

    <?php

}

?>

Answer 1

在onchange事件中，检查复选框的已检查状态，然后相应地执行操作。

 $("input[type=checkbox]").change(function() {  
     if($(this).is(":checked")) {
        var selectedval = $(this).val();
        var selectedtext = $(this).next().text();
        sendtobox(selectedval);
     }
      else {
        // remove the items 
     }
    });

关于删除项目，您必须跟踪为该特定复选框添加的值。只有这样你才能删除那些特定的项目。

根据评论编辑

在PHP代码中，根据复选框为添加的项添加标识符。我正在添加$q本身，这是复选框值作为类名。

<optgroup label="<?php echo $levels;?>" class="<?php echo $q;?>">
       <option value="<?php echo $subjects_id;?>"><?php echo $subjects;?></option>
</optgroup>

现在在你的jquery代码中：

 $("input[type=checkbox]").change(function() {  
     var selectedval = $(this).val();
     if($(this).is(":checked")) {
        var selectedtext = $(this).next().text();
        sendtobox(selectedval);
     }
      else {
        $("optgroup."+selectedVal).remove();
     }
    });

现在这将删除ajax调用添加的optgroup。

Answer 2

选中复选框的checked属性。

$("input[type=checkbox]").change(function() {  
    var selectedval = ($(this).val());
    var selectedtext =($(this).next().text());
    if (this.checked) {
        // do something else
    } else {
        sendtobox(selectedval);
    }


});

编辑：

关于删除，我假设你想撤消取消选中你在这里做的事情：

ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML;

不是直接添加响应文本，而是将其作为新的dom元素添加到show元素中，并使用一些唯一标识符，稍后可以使用它来删除它。像这样的东西（我使用jquery，因为你似乎也在你的第一个脚本中使用它，当然没有它，这一切都是可行的）：

var ajaxElm = $('#show');
ajaxElm.append($('<span id="uniqueidgoeshere">').append(this.responseText))

然后当你删除它时，请参考该ID。 id应该从更改的复选框的id（或其他属性）中推断出来。

如果选中复选框，如何调用函数，如果未选中则从附加列表中删除

2 个答案: