Sliced or hide Checkbox select option - javascript

I have two select option categories. The first One Strong Subjects and second one is Weak Subject.
All options are same in both category. What i want is after selecting the strong subject, the selected option get removed from weak subject category.
function strongsubjects(){
var str = document.querySelector(".strong input");
str.style.display="none";
}
<div class="strong">
<input type="checkbox" onclick="strongsubjects()" value="1">1
<input type="checkbox" onclick="strongsubjects()" value="2">2
<input type="checkbox" onclick="strongsubjects()" value="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="weaksubjects()" value="1">1
<input type="checkbox" onclick="weaksubjects()" value="2">2
<input type="checkbox" onclick="weaksubjects()" value="3">3
</div>

This is what you want I think
function strongsubjects(obj){
if(obj.checked){
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="block";
}
}
function weaksubjects(obj){
if(obj.checked){
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="block";
}
}
<div class="strong" style="width:50%;float:left">
Strong
<div data-strong-val="1">
<input type="checkbox" onclick="strongsubjects(this)" value="1">1
</div>
<div data-strong-val="2">
<input type="checkbox" onclick="strongsubjects(this)" value="2">2
</div>
<div data-strong-val="3">
<input type="checkbox" onclick="strongsubjects(this)" value="3">3
</div>
</div>
<div class="weak" width="50%" style="width:50%;float:left">
Week
<div data-week-val="1">
<input type="checkbox" onclick="weaksubjects(this)" value="1">1
</div>
<div data-week-val="2">
<input type="checkbox" onclick="weaksubjects(this)" value="2">2
</div>
<div data-week-val="3">
<input type="checkbox" data-week-val="3" onclick="weaksubjects(this)" value="3">3
</div>
</div>

I hope this is what you're looking for. The below code loops through all the checked checkboxes in each .weak and .strong divs, and hides the corresponding checkbox in the other div.
Before hiding the divs, all the previously hidden checkboxes are shown temporarily (in the 1st 2 lines of the function)
function filterOptions(){
$(".strong input[type='checkbox']").show();
$(".weak input[type='checkbox']").show();
$(".strong input[type='checkbox']:checked").each( function(){
$(".weak input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
$(".weak input[type='checkbox']:checked").each( function(){
$(".strong input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strong">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>

I have assumed that the values are sorted as showed in the image. You could reverese the logic for weaksubjects function.
function strongsubjects(){
const weakSubject = document.querySelectorAll(".weak input");
const strongSubject = document.querySelectorAll(".strong input").forEach((el,index) => {
if (el.checked) {
weakSubject[index].parentElement.style.display= 'none';
} else {
weakSubject[index].parentElement.style.display= 'block';
}
});
}
<div class="strong">
<div><input type="checkbox" onclick="strongsubjects()" value="1">1</div>
<div><input type="checkbox" onclick="strongsubjects()" value="2">2</div>
<div><input type="checkbox" onclick="strongsubjects()" value="3">3</div>
</div>
<div class="weak">
<div><input type="checkbox" onclick="weaksubjects()" value="1">1</div>
<div><input type="checkbox" onclick="weaksubjects()" value="2">2</div>
<div><input type="checkbox" onclick="weaksubjects()" value="3">3</div>
</div>

Related

nextAll() and prevAll() selects only one element, not all of them

I have a div with divs inside with inputs and their labels like this:
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
When i hover one of labels with mouse, i want to select all next divs and all previous divs (for appliing some css to them). So i use this:
$( "input[name='appointment_rating']+label" )
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show hover element");
console.log($(this).parent().html());
console.log("now will show all nextAll elements");
console.log(h.html());
console.log("now will show all prevAll elements");
console.log(j.html());
console.log("_");
alert("now will show all next elements");
h.each(function() {
alert(h.html());
});
alert("now will show all prev elements");
j.each(function() {
alert(j.html());
});
})
.mouseleave(function() {
console.log("leaved");
});
So if a select label for input with value "3", i want to see in alerts html of elements 0,1,2 as next and 4,5 as previous. But i see only 2 and 4, so only one element is selected as next and only one as previous. By the way, for some reason they are shoen several times, not one. What is wrong? And here is the jsfiddle - https://jsfiddle.net/c81wbefg/
jQuery.html will only return the innerHTML of the first element in the collection of matched elements. To output all the elements, you can loop over the jQuery collection with jQuery.each.
$("input[name='appointment_rating']+label")
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show all next elements");
h.each(function() {
console.log($(this).html())
});
console.log("now will show all prev elements");
j.each(function() {
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>

Jquery: loop on child elements based on parent class

i have my form structure as below :
Each required element as a parent class is_required
Child class has element specific class name like checkbox_required or radio_required etc
i want to loop on all for elements inside is_required class and then based on sub class do the required validation. My problem is i am not able to select the child class:
<div class="col-md-3">
<div class="form-group is_required">
<label>radio button</label><br>
<div class="radio_required">
<input type="radio" name="radio_button" value="1">1
<input type="radio" name="radio_button" value="2">2
<input type="radio" name="radio_button" value="3">3
</div>
</div>
</div>
<div class="form-group is_required">
<label>checkboxes</label><br>
<div class="checkbox_required">
<input type="checkbox" name="checkboxes[]" value="one">one
<input type="checkbox" name="checkboxes[]" value="two">two
<input type="checkbox" name="checkboxes[]" value="three">three
</div>
</div>
i am looping through all these elements as below
$(".is_required").each(function() {
var div = $(this)+" > div";// Not sure how will i get the div here need to get radio_required, checkboxe_required etc
})
can someone advise me how can i achieve that
Try using the following code
$(".is_required").each(function() {
var element = $(this);
//Loop all children elements of current element
$(element).children().each(function () {
if($(this).hasClass("checkbox_required")){
var checkboxElement = $(this);
console.log($(checkboxElement).attr("class"));
}
else if($(this).hasClass("radio_required")){
var radioElement = $(this);
console.log($(radioElement).attr("class"));
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group is_required">
<label>radio button</label><br>
<div class="radio_required">
<input type="radio" name="radio_button" value="1">1
<input type="radio" name="radio_button" value="2">2
<input type="radio" name="radio_button" value="3">3
</div>
</div>
</div>
<div class="form-group is_required">
<label>checkboxes</label><br>
<div class="checkbox_required">
<input type="checkbox" name="checkboxes[]" value="one">one
<input type="checkbox" name="checkboxes[]" value="two">two
<input type="checkbox" name="checkboxes[]" value="three">three
</div>
</div>

How to show item selected from dropdown should not appear in checkbox list

On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.
I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.
<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work

How to show set of Checkbox based on a previous checkbox

I have a form with a list of checkbox on it. When a user selects "Laboratory", I want the second list of checkbox to be shown. I dont want the second list of checkboxes to be shown until they have clicked on the "Laboratory" checkbox.
How do I accomplish this in Javascript or jQuery?
Here's the php code for first list of checkbox
<?php
$tsql = "select medTestName from medtest";
$tstmt = $con->prepare($tsql);
$tstmt->execute();
$tstmt->bind_result($mtn);
$tstmt->store_result();
while ($tstmt->fetch()){
$d1= '<input type="checkbox" name="test[]"
value="'.$mtn.'">'.$mtn.'<br>';
echo $d1;
}
?>
Here's the image of database which is the first list of checkbox
Here's the image or the UI of the first list of checkbox
Here's my html code for the second list of checkbox
<div><input type="checkbox" name="topic" value="1"><span>Complete Blood Count</span></div>
<div><input type="checkbox" name="topic" value="2"><span>Blood Typing</span></div>
<div><input type="checkbox" name="topic" value="3"><span>Urinalysis</span></div>
<div><input type="checkbox" name="topic" value="4"><span>RPR/TPHA</span></div>
<div><input type="checkbox" name="topic" value="5"><span>Hepatitis B screening</span></div>
<div><input type="checkbox" name="topic" value="6"><span>Fasting Blood Sugar</span></div>
<div><input type="checkbox" name="topic" value="7"><span>Creatinine</span></div>
<div><input type="checkbox" name="topic" value="8"><span>Total Cholesterol(Low Cholesterol, High Cholesterol)</span></div>
<div><input type="checkbox" name="topic" value="9"><span>Triglyceride</span></div>
<div><input type="checkbox" name="topic" value="10"><span>VLDL</span></div>
<div><input type="checkbox" name="topic" value="11"><span>Blood Uric Acid</span></div>
<div><input type="checkbox" name="topic" value="12"><span>Anti-HAV Igm Screening</span></div>
<div><input type="checkbox" name="topic" value="13"><span>Anti HBaAg</span></div>
<div><input type="checkbox" name="topic" value="14"><span>Drug & Alcohol Test</span></div>
<div><input type="checkbox" name="topic" value="15"><span>Stool Culture</span></div>
You can use like below,
Also you can make it dynamic using php
$(document).ready(function() {
//initially hide all the sub lists
$(".sublists").children().each(function() {
if ($(this).attr("data-sub-list") == "true") {
$(this).hide();
}
});
// when you click the checkbox show Radiology,Radiology or ect.
$("input[name=test]").click(function() {
var list = $(this).attr("data-list");
console.log(list);
if ($(this).prop('checked')) {
$("#" + list + "").show();
} else {
$("#" + list + "").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-7">
<input type="checkbox" name="test" id="Radiology" value="Radiology" data-list="Radiology-list">Radiology
<input type="checkbox" name="test" id="Laboratory" value="Laboratory" data-list="Laboratory-list">Laboratory
</div>
<div class="sublists">
<div id="Laboratory-list" data-sub-list="true">
<h4>Laboratory list</h4>
<div class="col-xs-7">
<input type="checkbox" name="topic" value="Creatinine">Creatinine
<input type="checkbox" name="topic" value="Triglyceride">Triglyceride
<input type="checkbox" name="topic" value="VLDL">VLDL
</div>
</div>
<div id="Radiology-list" data-sub-list="true">
<h4>Radiology list</h4>
<div class="col-xs-7">
<input type="checkbox" name="topic" value="one">One
<input type="checkbox" name="topic" value="two">Two
</div>
</div>
</div>
In all cases, you have to generate it (in a hidden ul for example) and show it with jQuery like $("#mydiv").toggle();
Here is the jsfiddle : https://jsfiddle.net/6ufzban3/
You can use the JQuery .toggle() function to show/hide elements.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if ($(this).attr("value") == "lab") {
$(".labboxes").toggle();
}
});
});
.labboxes {
margin: 10px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">Radiology
<input type="checkbox" value="lab">Laboratory
<div class="labboxes">
<div>
<input type="checkbox" name="topic"><span>Triglyceride</span>
</div>
<div>
<input type="checkbox" name="topic"><span>VLDL</span>
</div>
<div>
<input type="checkbox" name="topic"><span>Creatinine</span>
</div>
</div>
<?php
$tsql = "select medTestName from medtest";
$tstmt = $con->prepare($tsql);
$tstmt->execute();
$tstmt->bind_result($mtn);
$tstmt->store_result();
while ($tstmt->fetch()){
$d1= '<input type="checkbox" name="test[]" value="'.$mtn.'">'.$mtn.'<br>';
echo $d1;
}
?>

Is there a way to enable a button if at least one checkbox is checked with knockout?

I'm trying to see if I can find a knockout equivalent for this bit of jQuery:
http://jsfiddle.net/chriscoyier/BPhZe/76/
This is what I have to far, but all the items are bound to the same observable so it obviously doesn't work.
html:
<form>
<div>
<input type="checkbox" name="option-1" id="option-1" data-bind="checked: buttonEnabled"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2" data-bind="checked: buttonEnabled"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3" data-bind="checked: buttonEnabled"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4" data-bind="checked: buttonEnabled"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5" data-bind="checked: buttonEnabled"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="button" value="Do thing" data-bind="enable: buttonEnabled">
</div>
</form>
javascript:
var viewModel = {
buttonEnabled: ko.observable(true)
};
ko.applyBindings(viewModel);
http://jsfiddle.net/dludlow/WdWEW/
Yes. See the updated jsFiddle here: http://jsfiddle.net/WdWEW/4/
I did a few things.
I added a unique value attribute to each of the checkboxes
I bound the checkboxes to a new property on the view model named options which is an observableArray
I changed buttonEnabled to a computed property that returns true if the options property has a length greater than zero.
Here's the updated view model.
var viewModel = function() {
var self = this;
this.options = ko.observableArray(),
this.buttonEnabled = ko.computed(function() {
return self.options().length > 0;
});
};
ko.applyBindings(new viewModel());
Here's the updated view:
<form>
<div>
<input type="checkbox" name="option-1" id="option-1" value="1" data-bind="checked: options"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2" value="2" data-bind="checked: options"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3" value="3" data-bind="checked: options"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4" value="4" data-bind="checked: options"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5" value="5" data-bind="checked: options"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="button" value="Do thing" data-bind="enable: buttonEnabled">
</div>
</form>​

Categories

Resources