I have the following markup, below the closing span tag is a number list items.
<div class="header_block">
<span class="background_flag_container">
<input id="block_background" type="checkbox" name="block_background">
<span class="background_flag_text">Has Banner Background</span>
</span>
...
</div>
This is my jQuery. What I am looking to do is check if the one and only checkbox, with a name of 'block_background' is checked. There are a number of 'block_background' checkboxes on the page, but there will only ever be one within $(this) which is the .header_block div.
$(this).find(".background_flag_container input:checkbox[name='block_background']").each(function(){
if ($(this).checked) {
console.log('is checked');
}
});
How can I check if it's checked?
You can use is(':checked') to check if something is selected
$(this).find(".background_flag_container input:checkbox[name='block_background']").each(function(){
if ($(this).is(':checked')) {
console.log('is checked');
}
});
Although seeing that the checkbox has the id block_background which should be unique. You could just do this:
if ($('#block_background').is(':checked')) {
console.log('is checked');
}
$("input#block_background]").is(':checked')
Related
input radio does not hide content when unchecked, i can't make the content be hidden when the radio input is unchecked
how can I hide the content of the unmarked radio input?
clicking on another radio input is unchecked but does not hide the content
$('#alternar').click(function () {
$('#prueba').toggle();
});
$('#alternarx').click(function () {
$('#pruebax').toggle();
});
/* commented out because this select doesn't appear in the HTML:
$(".placeholder").select2({
placeholder: "Make a Selection",
allowClear: true
});
*/
function uncheckAndCheck(event) {
// gets all radios with the name prefix like 'custom-radio-'
// and uncheck all of them
document.querySelectorAll("input[type='radio'][name^='custom-radio-']").forEach(radio => {
radio.checked = false;
});
// checks the radio that triggered the click event
event.target.checked = true;
}
#prueba{
display:none
}
#pruebax{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
<div id="prueba"> Content1 </div>
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
<div id="pruebax"> Content2 </div>
George's solution works, but is reliant upon the HTML never changing. If you add any element between the radio button and the div, it will break the functionality.
To answer your question related to JavaScript:
It's unnecessary to check and uncheck the other radio inputs. You just need to give them the same name attribute.
Second, you're .toggle()ing the divs on click. That might be why they're acting strangely. You're not checking if the radio button is selected or not, and that's going to result in them toggling even when you click them when they're already selected. Luckily, you can just listen for them to change states.
Third, you can hold a selector for the target of the radio button you want to show/hide in a data attribute, and use one function for all of this.
Fourth, why mix inline onclick attributes, when you're using jQuery? Just listen for the event using the built-in listeners in jQuery.
//jQuery shorthand for $(document).ready(function(){ to be sure your DOM has loaded:
$(function() {
//run this on page load, too. Necessary because browsers will remember which one is checked on a page *refresh*, and hides the target divs initially when nothing is checked:
$checkedRB = $(".rbToggleDiv:checked");
if($checkedRB.length > 0) {
toggleVisibleDivs($checkedRB);
} else {
toggleVisibleDivs(false);
}
//both radio buttons have the same class as well, so you can listen for either of them to change states:
$(document).on("change", ".rbToggleDiv", function(e) {
//this = radio button that has changed
var $thisRB = $(this); //turn it into a jQuery object
if($thisRB.prop("checked")) { //only do something if this RB is checked
toggleVisibleDivs($thisRB);
}
});
function toggleVisibleDivs($targetRB) {
if ($targetRB === false) { //no target sent in
//hide all
$(".pruebaDiv").hide(); //hide all divs
} else { //target sent in
if ($targetRB.data("target-div")) { //make sure the data is set
var targetSelector = $targetRB.data("target-div"), //grab the string from the data object
$targetDiv = $(targetSelector); //use it to select the target div
if ($targetDiv.length > 0) { //make sure the div is selected
//hide all divs with the same class:
$(".pruebaDiv").hide();
//then, show only the one you want visible, the $targetDiv:
$targetDiv.show();
} else {
console.error("Div not found!", targetSelector);
}
} else {
//data not set:
console.error("Data was not set.");
}
}
}
});
.pruebaDiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- if they have the same names, they will act as a radio button list, and will act accordingly. Also, you should really choose more descriptive IDs and names: -->
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternarx" data-target-div="#prueba" />
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternar" data-target-div="#pruebax" />
<!-- for the sanity of the user, I've moved these two divs next to each other below the radio buttons so they don't move around: -->
<div class="pruebaDiv" id="prueba"> Content1 </div>
<div class="pruebaDiv" id="pruebax"> Content2 </div>
This is actually possible entirely with CSS. You can use the adjacent sibling combinator +, which affects an element immediately following the first.
#prueba{
display: none;
}
#pruebax{
display: none;
}
input:checked + #prueba,
input:checked + #pruebax {
display: block;
}
<input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
<div id="prueba"> Content1 </div>
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
<div id="pruebax"> Content2 </div>
I'm creating a function which allows a user to select and deselect multiple products with Javascript, The problem is it shows only one checkbox instead of each product to have its checkbox .If I have 20 products it shows 1 checkbox for the first product, how can I fix this?
Blade file
<span><a class="Select-Deselect" href="">Select</a></span>
#foreach($products as $product)
<div id="checkBox1" style=" display:none; position:absolute;">
<h1>hello</h1>
</div>
#endforeach
Javascript
<script>
/* Select deselect */
$(".Select-Deselect").click(function(e) {
if ($(this).html() == "Select") {
document.getElementById("checkBox1").style.display="block";
$(this).html('Deselect');
}
else {
$(this).html('Select');
document.getElementById("checkBox1").style.display="none";
}
return false;
});
</script>
In your loop you are again creating multiple divs with the same id attribute. Remove the id attribute and use a class instead, as said, id attributes must be unique in a document.
Change your <a> to select/deselect to a button, that's more suitable:
Since you already use jQuery in your script I also used it to toggle the display style on the elements.
I removed the id="checkBox1" and replaced it with class="checkbox-container". Using a class makes it possible to select more than one element, that's what $(".checkbox-container") does.
Here's a working example:
blade:
<button class="Select-Deselect" type="button">Select</button>
#foreach($products as $product)
<div class="checkbox-container" style="display:none;">
<h1>hello</h1>
</div>
#endforeach
jQuery:
<script>
$(".Select-Deselect").click( function(e) {
if ($(this).html() == "Select") {
$(".checkbox-container").css('display', 'block');
$(this).html('Deselect');
} else {
$(".checkbox-container").css('display', 'none');
$(this).html('Select');
}
return false;
});
</script>
I have a class that adds a fake checkbox and using jQuery, once the user clicks it, add the checked state class to the fake checkbox.
CSS
.fake-checkbox { /* ... */ }
.fake-checkbox.checked-state { /* ... */ }
HTML
<label>
<input type="checkbox">
<div class="fake-checkbox"></div>
</label>
JS
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
} else {
$(this).addClass('checked-state');
}
});
}(jQuery));
Now, I also want to make the input checkbox in its checked state at the same time when the class is added and in its unchecked state when the class is removed.
I know this can be done with element.checked = true but not in jQuery.
How can I achive this?
EDIT
This is surely different and not a duplicate of this question cause we're in a different case, although there's a similarity about 'ticking a checkbox using jQuery' but still not a possible duplicate.
Thanks.
Besides the jQuery answers, i would like to suggest (for this specific case) a CSS only solution, since the checkbox and the .fake-checkbox are siblings.
CSS
.fake-checkbox { /* ... */ }
:checked + .fake-checkbox{ /* ... */ }
HTML
<label>
<input type="checkbox">
<div class="fake-checkbox"></div>
</label>
Demo
.fake-checkbox { color:#ccc; }
:checked + .fake-checkbox{ color:green; }
<label>
<input type="checkbox">
<div class="fake-checkbox">fake</div>
</label>
As for a jQuery answer i would suggest you monitor the state of the actual checkbox instead of manually testing the states.
$('label :checkbox').on('change', function(){
$(this)
.siblings('.fake-checkbox')
.toggleClass('checked-state', this.checked);
})
Demo
$('label :checkbox').on('change', function(){
$(this)
.siblings('.fake-checkbox')
.toggleClass('checked-state', this.checked);
})
.fake-checkbox { color:#ccc; }
.fake-checkbox.checked-state { color:green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox">
<div class="fake-checkbox">fake</div>
</label>
As the checkbox is immediate preceding sibling, you can use .prev() then set the property using .prop() method
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
$(this).prev(':checkbox').prop('checked', false);
} else {
$(this).addClass('checked-state');
$(this).prev(':checkbox').prop('checked', true);
}
});
}(jQuery));
Above code can be simplified as
(function($) {
$('.fake-checkbox').click(function() {
$(this).toggleClass('checked-state');
$(this).prev(':checkbox').prop('checked', $(this).hasClass('checked-state'));
});
}(jQuery));
Try this
$('#yourCheckboxSelector').prop('checked', true);
You can check a checkbox using JQuery.
Using the prop method.
https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/
Use this
HTML
<label>
<input id="real-checkbox" type="checkbox">
<div class="fake-checkbox"></div>
</label>
JS
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
$( "#real-checkbox" ).prop( "checked", false );
} else {
$(this).addClass('checked-state');
$( "#real-checkbox" ).prop( "checked", true );
}
});
}(jQuery));
i am trying to learn and create a jquery which $("#answer") and find all the checkbox inside and check. As an example if checkbox inside #a1 is checked other div (a2,a3,a4) is hidden or other message come out. if i uncheck the #a1 all the div will come out again.
Please enlighten me on the code.
<div id="answer">
<div id="a1">A.<input type="checkbox" name="a1" onclick="cbox()" ></input></div>
<div id="a2">B. <input type="checkbox" name="a2"onclick="cbox()"></input></div>
<div id="a3">C. <input type="checkbox" name="a3"onclick="cbox()"></input></div>
<div id="a4">D. <input type="checkbox" name="a4"onclick="cbox()"></input></div>
</div>
function cbox() {
if (this checkbox is checked) {
target other div inside (#answer) and add .hide()
}
}
2)Is there anyway to add a trigger where i don't need to use onlick="cbox" ?
tq
It's better to use .click() instead of inline javascript onclick.
However, you should use .change() event for input elements instead of click:
$('input[type="checkbox"]').change(function() {
$(this).parent().siblings('div').toggle(!this.checked);
});
Fiddle Demo
Use .change() event instead of .click(). Try this:
$('input[type="checkbox"]').change(function() {
$(this).parent('div').siblings('div').toggle(!this.checked);
});
DEMO
Try this:
$("#answer input").change(function () {
if ($(this).is(":checked")) {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "none");
})
} else {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "block");
})
}
});
DEMO
I have two radiobuttons in one group.
The first is checked if you visit the page by 'checked' in html..
I want to use javascript to adjust some css (through javascript, not by adding a class).
So if the first is selected, I want a certain class to get a display:none and an other class a display:block, but when the second radio button is selected, I want the the same as with the other radio button only and vice versa.
My html is:
<li><input type="radio" name="kosten" id="maand" checked><label for="maand">per maand</label></li>
<li><input type="radio" name="kosten" id="jaar" ><label for="jaar">per jaar</label></li>
I tried some jquery but I'm really bad at it.
if ($('input#maand').is(':checked'){
$('.bedrag-jaar').css('display', 'none');
}
Some examples of the divs I want to show up and disappear.
<li><strong><span class="bedrag-maand">some text</span> <span class="bedrag-jaar">some other text</span></strong></li>
Do you have any idea how i can get this working?
Try something like
jQuery(function(){
var $spans = $('span[class*="bedrag"]').hide();
$('input[name="kosten"]').change(function(){
$spans.hide();
$spans.filter('.bedrag-' + this.id).show();
})
})
Demo: Fiddle
it can be done much powerful, if you can add an additional class to the bedrag-* elements like
<li><strong><span class="bedrag bedrag-maand">some text</span> <span class="bedrag bedrag-jaar">some other text</span></strong></li>
then
jQuery(function(){
var $spans = $('.bedrag').hide();
$('input[name="kosten"]').change(function(){
$spans.hide();
$spans.filter('.bedrag-' + this.id).show();
})
})
Demo: Fiddle
Here is the code and try this:
$( "input[type=radio]" ).on( "click",function(){
if ($('#maand').is(':checked')){
$('.bedrag-maand').css('display', 'block');
$('.bedrag-jaar').css('display', 'none');
} else {
$('.bedrag-jaar').css('display', 'block');
$('.bedrag-maand').css('display', 'none');
}
});
JSFIDDLE