Hide/Show divs based on check box selection - javascript

I want to show / hide divs based on check box selection.
here is the scenario,
I have two check box in a div named decider,
selecting check box one should show Div box-one
selecting check box two should show Div box-two
Once someone has made the selection, i want the decider div to hide. I am not being able to make this work
$(function() {
$('.decider').removeClass('hide');
$('.box-one').addClass('hide');
$("#optionTwo").click(function() {
$('#optionOne').attr("checked",false);
});
$("#optionOne").click(function() {
$('#optionTwo').attr("checked",false);
});
$("#send-decide").click(function() {
if($('#optionTwo').is(':checked')){
$('.decider ').addClass('hide');
$('.box-one').removeClass('hide');
}
if($('#optionOne').is(':checked')){
$('.decider ').addClass('hide');
$('.box-two').removeClass('hide');
}
});
});
<div class="decider hide">
<p style="font-size:10px;color:#000;">Please select an option below</p>
<label class="checkbox">
<input id="optionTwo" type="checkbox" name="Request" value="Request" />
Select Box one </label>
<label class="checkbox">
<input id="optionOne" type="checkbox" name="Download" value="Download" />
Select Box two </label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span> </div>
<div class="box-one">
<p>this is first box</p>
</div>
<div class="box-two hide">
<p>this is second box</p>
</div>

You are missing .hide class display:none property css.. Rest everything is fine
$(function() {
$('.decider').removeClass('hide');
$('.box-one,.box-two').addClass('hide');//add hide to both the class
$("#optionTwo").click(function() {
$('#optionOne').attr("checked",false);
});
$("#optionOne").click(function() {
$('#optionTwo').attr("checked",false);
});
$("#send-decide").click(function() {
if($('input[type="checkbox"]:checked').length)//check whether any checkbox is checked
{
//if yes go ahead and do what you wanted to do
$('.decider ').addClass('hide'); //hide it in any case
if($('#optionTwo').is(':checked')){
$('.box-one').removeClass('hide');
}
if($('#optionOne').is(':checked')){
$('.box-two').removeClass('hide');
}
}
else
alert('select a checkbox');//if not display some message to user
});
});
.hide{
display:none; //add this property
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="decider hide">
<p style="font-size:10px;color:#000;">Please select an option below</p>
<label class="checkbox">
<input id="optionTwo" type="checkbox" name="Request" value="Request" />
Select Box one </label>
<label class="checkbox">
<input id="optionOne" type="checkbox" name="Download" value="Download" />
Select Box two </label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span> </div>
<div class="box-one">
<p>this is first box</p>
</div>
<div class="box-two">
<p>this is second box</p>
</div>

Related

How to display only two buttons when radio button is checked?

I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.
This is the HTML document that I am working with:
.hidden{
display: none;
}
<label for="pay">Payment Option</label>
<div class="row check">
<div class="col-sm-6">
<input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
<label for="gcash" class="pay">Gcash</label>
</div>
<div class="col-sm-6">
<input type="radio" id="walk" name="pay" value="unpaid"/>
<label for="walk" class="pay">Walk In</label>
</div>
</div>
<div class="buttons">
Back
Proceed payment
<input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
</div>
radio.addEventListener('change', function() {
console.log(this.value)
});
use this handler for getting data of radio
then, find your element and use
element.classList.toggle("hidden");
for toggle class name, which uses in your css

Finding data attribute and checkbox children

I hope you can see what I'm trying to do here.
I am trying to keep the same structure for the divs but clicking the select all in the top area only selects those 3 and the bottom select all only selects the bottom 3.
Obviously there are better ways to do this but I have stripped my code back to this basic example.
please help me rewrite this line:
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
So i can use the profile-id data attribute to select the checkboxes that fall inside that div.
Thanks
$('.profile #select_all_cb').click(function() {
var profileID = $(this).closest('.profile').data('profile-id');
if($(this).is(":checked")) {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
$(this).prop('checked', true);
});
} else {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() { //Check all boxes
$(this).prop('checked', false);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
IDs are unique, so changed id="select_all_cb" to class="select_all_cb".
On click .select_all_cb, goes up and finds .profile parent, store the checkbox value as boolean in isChecked variable, and finds all .score_alert_cb1 checkboxes within the current .profile element.
$(".profile .select_all_cb").click(function() {
var profile = $(this).closest(".profile");
// var profileID = profile.data('profile-id');
var isChecked = $(this).is(":checked");
profile.find(".score_alert_cb1").prop("checked", isChecked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
What's wrong with
$("div").find("[data-profile-id='"+profileID+"']").find("[type=checkbox]")each(...}
?

How will I make an If College is Check then this Course would be in the dropdown?

So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>
//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})
I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>

How to target the last of type visible element with jquery

I need some help I have a drupal webform in which new form elements show conditionally if the previous text input has content.
What I’m trying to do is select all inputs that are currently visible and then specifically target the last one (the most recently shown).
The issue is this targets the last child within each .form-item rather than the last form item itself directly.
$(".webform").on("change", function() {
$(".form-item:visible").each(function() {
if ($(this).is(":last-of-type")) {
//Do whatever
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webform">
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:none">
</div>
</div>
You can simplify your flow by using this jQuery:last selector
$('.form-item:visible:last')
You may apply the below code on form field change or form submit, depending on your requirements.
<div class="webform">
<div class="form-item" style="display:block">
<input type="text" value="1" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="2" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="3" />
</div>
<div class="form-item" style="display:none">
<input type="text" value="4" />
</div>
</div>
<script>alert($(".form-item:visible:last input").val());</script>

Insert an attribute to input field when user selects a radio

I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.
Here is the code I'm using for the radio select:
<script>
$(document).ready(function() {
$("input[name$='sel']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
});
if (test == "CreditCard") {
$("#card").addClass("validate[custom[card]] text-input");
} else {
$("#card).removeClass("validate[custom[card]] text-input");
}
});
</script>
Field code:
<table><tr><td>
<p>
Credit/Debit Card<lable style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel" value="CreditCard" />
</p>
<p>
Paypal<input type="radio" id="sel" name="sel" value="Paypal" />
</p>
<p>
Wire Transfer<input type="radio" id="sel" name="sel" value="WireTransfer" />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">
<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
<input name="card" type="text" id="card" value="" style="width:85px;" />
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">
Transfer
</div>
<!====================================================================================>
</td></tr></table>
​
This is the attribute that needs to be inserted to the "card" input field:
class="validate[custom[card]] text-input"
When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.
Link for fiddle:
FIDDLE
telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.
but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/
just click "Credit/Debit Card" and the class nowitsadded wil be added to the input field, which will turn red.
HTML
<input type="radio" id="sel1" name="sel"> Credit/Debit Card
<br>
<input type="radio" id="sel2" name="sel"> Paypal
<br>
<input type="radio" id="sel3" name="sel"> Wire Transfer
<br>
<br>
<div id="selCreditCard" class="desc">
Card Number <input name="card" type="text" id="card" value="">
</div>
JS
$('#sel1').click(function() { $('#card').addClass('nowitsadded') })
CSS
.nowitsadded {background-color: red}

Categories