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

Question

流程是这样的：

我先推导出checkbox的值，传给函数触发ajax。 ajax 函数 return 在 select 框中的多个组中的数据列表。每次选中一个复选框时，该值将附加到 select 框中。但是我想在未选中复选框时从 select 框中删除值。

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

第一个剧本

<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

勾选复选框的勾选属性。

$("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（或其他属性）中推断出来。

Answer 2

在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 
     }
    });

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

EDIT based on comments

在您的 PHP 代码中，为基于复选框添加的项目添加标识符。我正在添加 $q 本身，它是作为 class 名称的复选框值。

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

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

How to call a function if checkbox checked and remove from appended list if unchecked

javascript

ajax

checkbox