Vhinzajh SunZtar Vhinzajh SunZtar - 1 month ago 11
HTML Question

Javascript function working in JSFiddle, but not working when I copy it on my local page

This is working on [http://jsfiddle.net/4zxgshpq/ ] (I have Edited) but when I copy the whole code and run it on my page did not work. I have searched for answers like moving a javascript at the end or adding $(function(){ at the beginning but it still does not work and I couldn't find any solutions. Can some one please help. Thank you.

This is my Script

$(function(){
$("#Units").on("change", function() {
if ($(this).val() == "Marketing") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 1){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
if ($(this).val() == "Finance") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 2){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
if ($(this).val() == "Operations") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 3){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
$("p").click(function(){
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
});
}).trigger('change');
});


-- While my index page looks like this

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Checkbox inside a Dropdown based on another Dropdown Option Menu</title>
<script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>
</head>

<body>
<style>
.multiselect {
width: 200px;
}

.selectBox {
position: relative;
}

.selectBox select {
width: 100%;
font-weight: bold;
}

.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#checkboxes {
display: none;
border: 1px gold solid;
}

#checkboxes label {
display: flex;
}

#checkboxes label:hover {
background-color: #1e90ff;
}

</style>
<select id="Units">
<option value="Marketing"> Marketing </option>
<option value="Finance"> Finance </option>
<option value="Operations"> Operations </option>
</select>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<p style = "cursor:pointer">
Uncheck All</p>
<label for="one">
<input type="checkbox" id = "1" class="dissable" name="4[]" onclick="check();" value="1" /> chbx1</label>
<label for="two">
<input type="checkbox" id = "2" class="dissable" name="4[]" onclick="check();" value="2" /> chbx2</label>
<label for="three">
<input type="checkbox" id = "3" class="dissable" name="4[]" onclick="check();" value="3" /> chbx3</label>
<label for="four">
<input type="checkbox" id = "4" class="dissable" name="4[]" onclick="check();" value="4" /> chbx4</label>
<label for="five">
<input type="checkbox" id = "5" class="dissable" name="4[]" onclick="check();" value="5" /> chbx5</label>
<label for="six">
<input type="checkbox" id = "6" class="dissable" name="4[]" onclick="check();" value="6" /> chbx6</label>
</div>
</div>
<script type="text/javascript">

var expanded = false;

function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}


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



Thanks for having time for this. Have a good day to you .

Answer

You are using jQuery, but not loading it.

Add the following before your script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

It works on jsfiddle because it is adding the jQuery script for you as seen in the following screenshot

JSFiddle framework selection

If you don't want to use a cdn, you may obtain a local copy of jquery via jquery.com and put it in your source "js" directory.

Comments