多个复选框清除或重置选项jQuery

时间:2018-07-21 07:27:12

标签: javascript jquery html

我想咨询有关javascript jquery的问题 我希望这个值> 20 && <40清除或重置jquery建议中的选项。 它在javascript中出现函数错误,并且没有no clear and reset选项。但是功能显示显示块位置错误。

$scope.addPersonnelsByRole = function(addObj, user_role_type_id, formName) {
  if ($scope.addPersonnelValidation(formName)) {
    //valid form
  }
}
<script>
function Checkbox() {
    var length = document.tester.selection.length;
    var $result = "";
    var chked = 0;
    for (i = 0; i < length; i++) {
       if (document.tester.selection[i].checked) {
          $result += document.tester.selection[i].value;
       }
    }
    var getdata = $result;

}

var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
    var selectedtext = ($(this).next().text());
    if ($(this).is(':checked')) {
       $("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
    } else {
       $('option[value*="' + selectedtext + '"]').remove();
    }

});

function range(val) {
    document.getElementById('number').value = val;
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
    document.getElementById("wordingprogrammer").style.display = "none";
    document.getElementById("wordingsenior").style.display = "none";
} else {
    document.getElementById("wordingprogrammer").style.display = "block";
    document.getElementById("wordingsenior").style.display = "block";
}
		
</script>

1 个答案:

答案 0 :(得分:1)

function Checkbox() {
    var length = document.tester.selection.length;
    var $result = "";
    var chked = 0;
    for (i = 0; i < length; i++) {
        if (document.tester.selection[i].checked) {
            $result += document.tester.selection[i].value;
        }
    }
    var getdata = $result;
}

var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function (e) {
    var selectedtext = ($(this).next().text());
    if ($(this).is(':checked')) {
        $("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
    } else {
        $('option[value*="' + selectedtext + '"]').remove();
    }
});

function range(val) {
    document.getElementById('number').value = val;

    if (val > 20 && val < 40) {
        $("input[type='checkbox']:checked").click();
    }
}

prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
    document.getElementById("wordingprogrammer").style.display = "none";
    document.getElementById("wordingsenior").style.display = "none";
} else {
    document.getElementById("wordingprogrammer").style.display = "block";
    document.getElementById("wordingsenior").style.display = "block";
}	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="post" id="tester" name="tester">

    <input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()" />
    <label id="wordingdirector">Director</label>

    <input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()" />
    <label id="wordingprogrammer">Programmer</label>

    <input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()" />
    <label id="wordingsenior">Senior</label>

    <input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);" />
    <input type="text" id="number" value="" />
</form>

<a id="showdatacheckbox"></a>