jQuery toggle element if other element exists - javascript

EDIT
I don't have access to the original HTML. I can only add jQuery to the page.
I was trying to figure out how to show/hide an element (div) on a page dynamically based on if another element (div) exists.
I have a checkbox on the page that gets a class appended when clicked.
The code here is what I was thinking I would like. But it just hides the element when .is-checked exists. It doesn't toggle it back again.
$( document ).ready(function() {
if($('.is-checked').length){
$('.fn_container_start').hide();
}
});
I already have a checkbox with a class called .selectit and when you click it a class get's appended called .is-checked
I would like that when .is-checked get's appended on the page that it hides the class .fn_container_start
But also when .is-checked is not on the page, the .fn_container_start class should be hidden again.
Here's the html for the checkbox before and after it's clicked
Before the checkbox is clicked
<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>
After
<label class="selectit is-checked"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>
Is this possible?
Thanks,
Morten

function valueChanged(){
if($('.toggle_check').is(":checked")) {
$('.fn_container_start').hide();
$('.toggle_check').addClass('is-checked');
}
else{
$('.fn_container_start').show();
$('.toggle_check').removeClass('is-checked');
}
}
<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157" onchange="valueChanged();"> Brushes</label>
<div class="fn_container_start">
<p class="hide">div hides if the checkbox checked</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

I think you can use .hasClass method
$( document ).ready(function() {
$("#in-download_category-157").click(function() {
$(".selectit").toggleClass("is-checked");
if($('.selectit').hasClass('is-checked')){
$('.fn_container_start').hide();
}else{
$('.fn_container_start').show();
}
});
});

Use this code
<script type="text/javascript">
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
$(".selectit").addClass("is-checked");
});
});
</script>

$( document ).ready(function() {
$('.selectit').on('click', function(){
$('.fn_container_start').toggleClass("hidden");
});
});
.hidden{display:none !important;}
.fn_container_start{border:1px dashed red;}
<label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> Brushes</label>
<div class="fn_container_start">This div have .fn_container_start class</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$('.selectit input.toggle_check').on('change',function(){
if($(this).is(":checked")) {
$('.fn_container_start').hide();
$(this).addClass('is-checked');
}
else{
$('.fn_container_start').show();
$(this).removeClass('is-checked');
}
})
<label class="selectit"><input value="157" type="checkbox" class="toggle_check" name="download_category" id="in-download_category-157"> Brushes</label>
<div class="fn_container_start">
<p class="hide">div hides if the checkbox checked</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Related

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

jQuery checked attribute not seen when using html()

I have a specific problem where I need to render a html string from the server and show it to the user. The user then clicks the checkboxes and I transform it back into a html string and save it on the server.
Problem is after the user clicks the checkboxes, the transformed HTML string does not contain the checked attribute.
Here is a snippet
$("button").on("click", function(){
console.log($("#container").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="checkbox" id="checkbox"/>
<button> Test </button>
</div>
But when I manually click the checkbox and click the button and examine the console log, the checked attribute inside the HTML string is not seen.
How can I solve this problem?
Set checked attribute manually by .attr('checked', 'checked') on change:
$("button").on("click", function() {
console.log($("#container").html());
});
$('#checkbox').change(function() {
if ($(this).is(':checked')) {
$(this).attr('checked', 'checked');
} else {
$(this).removeAttr('checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="checkbox" id="checkbox" />
<button> Test </button>
</div>
When you check a checkbox manually, the checked HTML attribute doesn't change.
You can change it yourself by selecting every checked checkbox and manually updating them with the jQuery :checked selector:
$('#container input[type="checkbox"]:checked').attr('checked','true');
$("button").on("click", function() {
$('#container input[type="checkbox"]:checked').attr('checked','true');
console.log($("#container").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="checkbox" id="checkbox" />
<button> Test </button>
</div>

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

How to Show/hide a <div> based on radio checked, not clicked

I am trying to show a <div> when a certain radio button is selected by the user.
I found some nice code form http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php and I adapted it for myself like this:
With the CSS & script:
<style type="text/css">
.box{padding: 2px;display: none;margin-top: 2px;border: 0px solid #000;}
.red{ }
.green{ }
.blue{ }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if($(this).attr("value")=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if($(this).attr("value")=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
});
});
</script>
Then I got this to remember the selection:
if (!empty($_REQUEST['object'])) { $object = $_REQUEST['object']; }
Add the radio selection in the form that remembers the selection if the form needs to be reloaded:
<input tabindex="1" type="radio" name="object" <?php if (isset($object) && $object=="Tax representation") echo "checked";?> value="Tax representation">Tax representation
<input tabindex="2" type="radio" name="object" <?php if (isset($object) && $object=="VAT recovery") echo "checked";?> value="VAT recovery">VAT recovery
<input tabindex="3" type="radio" name="object" <?php if (isset($object) && $object=="Other") echo "checked";?> value="Other">Other
Followed with the <div> to be shown or hidden:
<div class="red box">text 1</div>
<div class="green box">text 2</div>
<div class="blue box">text 3</div>
Now my problem is that when the form is reloaded, the radio selection is memorized, but the corresponding <div> does not show.
I believe there may be a way to change the script from "click" to "selected" or something like that. Would you help?
This is similar to previous answers, extracting the behavior into a function so that you can run it on page load and in an event:
function showBoxes(value) {
if(value=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if(value=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if(value=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
}
$(document).ready(function(){
showBoxes($("input[type='radio']:checked").attr("value"));
$('input[type="radio"]').click(function(){
showBoxes($(this).attr("value"));
});
});
jsFiddle
Use change instead of click
$('input[type="radio"]').change(function(){
Then, move your function to a variable and call it when the page loads.
The final code should look something like this.
$(document).ready(function(){
var updateDivs = function(){
if($(this).attr("value")=="Tax representation"){
$(".box").not(".red").hide();
$(".red").show();
}
if($(this).attr("value")=="VAT recovery"){
$(".box").not(".green").hide();
$(".green").show();
}
if($(this).attr("value")=="Other"){
$(".box").not(".blue").hide();
$(".blue").show();
}
}
$('input[type="radio"]').click(updateCheckbox);
$.proxy(updateDivs, $('input[type="radio"]'))
});
Add this line after your $('input[type="radio"]').click(function(){ code and inside the document.ready block
$('input[type="radio"]:checked').trigger('click');
Your current logic will work only when the radio buttons are clicked. So let's trigger the click event of the checked radio button when the page reloads. Which inturn will run your logic and toggle the divs accordingly.

html get div tag in many levels

I got class required on div tag, and I want to remove it change function of text field, but I can't get to that div level, please help me to reach this.parent.parent.closest('div')
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange(removeRequired(this, this.parent.parent.closest('div')))/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
It seems that what you want is to add/remove the required class based on whether the input is empty or not.
$('.required').on('change', 'input', function(event) {
// add or remove required class
$(event.delegateTarget)
.toggleClass('required', this.value.length === 0);
});
It will work with the following HTML:
<div class='required'>
<div>
<div>
<input type='text' value='123'/>
</div>
</div>
</div>
It sets up event delegation on the outermost <div> elements and then sets or removes the required class based on the input value.
Demo
You dont have to mess up with javascript and jquery. You can bind the change event with jquery like this,
$(document).ready(function () {
$("input[type='text'] ").change(function () {
$(this).closest(".required").removeClass("required");
});
});
try this
$("input[type=text]").closest('div.required').removeClass("required");
onchange function be
$("input[type='text']").change(function(){
$(this).closest("div.required").removeClass("required");
});
or
$("input[type='text']").change(function(){
$(this).parents("div.required").removeClass("required");
});
Why not easily working with id?
<div id="input-wrapper" class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired(this, $('#input-wrapper'))"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
By the way, if you want to reach the div class='required' with parent, you need 3 levels! Althougth the use of closest() is by far a better answer.
You can try:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired.call(this)"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(){
$(this).parent().parent().parent().removeClass('required');
}
</script>

Categories

Resources