Checked a checkbox based on another checkbox if checked - javascript

I have some checkboxes generating through a foreach loop. All I want, by checking one checkbox another checkbox will be checked. I have already tried something like this,
This is the foreach block where the checkboxes are generating.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" id="testPrice" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
This is the script I tried
var chk1 = $("#selectTest");
var chk2 = $("#testPrice");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
in this case, the first checkbox only works fine, but rest of them are not working.

It only works for the first checkbox only because id= attributes only match the first matching node in the DOM. Use a class (.selectTest) instead.
You may need to get rid of id="testPrice" as well or make it a class instead.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
The jquery script.
var chk1 = $(".selectTest");
chk1.on('change', function(){
$(this).closest("div").next().prop('checked', $(this).is(":checked"));
});
id attribute
The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).

Related

Javascript getElementById when you dont know the ID

I am using PHP to assign a random ID to a checkbox, now I want to check that value of checkbox but because I don't know the ID, I dont know how to check it.
so here is the HTML :
<input class="citycheck"
id="<?php $city_id; // this is randomly generated ?>"
type="checkbox"
name="<?php echo $city_name"> <?php echo $city ?>
<div class"properties">Some Properties</div>
and my Javascript:
<script>
jQuery(document).ready(function($) {
// right now I am checking by class
// show or hide if it is already checked
if ($(".citycheck").is(':checked'))
$(".properties").show();
else
$(".properties").hide();
// show or hide if user clicked on the checkbox
$(".citycheck").click(function() {
if ($(this).is(":checked")) {
$(".properties").show();
} else {
$(".properties").hide();
}
});
});
</script>
but because there are many checkbox with class citycheck when one is checked, if another city is not checked, the properties are still shown.
How can I check the value of checkbox by ID when I don't know the ID yet?
Update
The reason I want the ID is because ID is unique and class is not. So using class, if one checkbox is checked it shows properties related to that class.
I have a checkbox for every city, every city had some properties, if I click on Chicago, then properties of Chicago are listed. Problem right now is that if I check Chicago, properties of Boston are also shown.
You could assign a pseudo class in your element and use this pseudo class to find all the elements in your page. Then you can check which of them are checked and do whatever is needed. I did the same also for details by assigning a pseudo class. As it is now your html code if someone change the name of the class from citycheck to whatever the behavior of you UI will not change at all, provided that will note move the elements, since we rely on the siblings. Please have a look at the following snippet:
$(function(){
$('.js-citicheck').on("change", function(){
var ele = $(this);
var details = ele.siblings('div.js-details');
if(ele.is(":checked")){
details.show();
} else {
details.hide();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="citycheck js-citicheck"
id="berlin"
type="checkbox"
/>
<label for="berlin">Berlin</label>
<div class="details js-details" style="display:none">Berlin details.</div>
</div>
<div>
<input class="citycheck js-citicheck"
id="london"
type="checkbox"
/>
<label for="london">London</label>
<div class="details js-details" style="display:none">London details.</div>
</div>
<div>
<input class="citycheck js-citicheck"
id="paris"
type="checkbox"
/>
<label for="paris">Paris</label>
<div class="details js-details" style="display:none">Paris details.</div>
</div>
You Can add a prefix to the id
<input class="citycheck"
id="<?php echo 'id_'.$city_id; ?>" // this is randomly generated
type="checkbox"
name="<?php echo $city_name"> <?php echo $city ?>
<div class"properties">Some Properties</div>
and then :
var list = document.querySelectorAll('[id^="id_"]');
var list = $('[id^="id_"]');
traverse the list and check if it's checked or not
I think you can achieve everything you want to with simple jQuery selectors.
Working Example:
$(document).ready(function(){
$('.properties').hide();
$('.citycheck:checked + .properties').show();
$('.citycheck').change(function(){
$(this).next('.properties').toggle();
alert('The id of this checkbox is: ' + $(this).attr('id'));
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sdnflfldja" class="citycheck" type="checkbox" name="Alphaville">
<div class="properties">Some Properties</div>
<input id="sdnfldfj" class="citycheck" type="checkbox" name="Betaville">
<div class="properties">Some Properties</div>
<input id="szdnnadsc" class="citycheck" type="checkbox" name="Gammaville">
<div class="properties">Some Properties</div>
<input id="sallddfa" class="citycheck" type="checkbox" name="Deltaville">
<div class="properties">Some Properties</div>
<input id="adlkfkfddsl" class="citycheck" type="checkbox" name="Epsilonville">
<div class="properties">Some Properties</div>

Can't select and hide any previous element

I'm about lose my mind with this problem. No form of jQuery selector seems to work in dynamically finding any elements above the link. I'm trying to access an element above the link and hide it. Using things like parent(), prev(), before(), closest(), ect. will show a non-null object but it won't respond to the hide() method.
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>
function remove_fields(link)
{
$(link).prev("input[type=hidden]").val('1'); // this doesn't work
var divToHide = $(link).prev('div');
$(divToHide).hide() // this doesn't work
//$('#test_fields').hide(); //this works
}
Try replacing the link as below:
Remove Ingredient
I'm not sure. But maybe this is the problem. Because I remember that I have had problem with 'this'previously and when I replaced that, it performed the job.
you can try .closest() and .find()
function remove_fields(link) {
$(link).closest('div[class^="col-xs"]').find("input[type=hidden]").val('1');
var div_to_hide = $(link).closest('div[class^="col-xs"]').find('#test_fields');
$(div_to_hide).hide();
//$('#test_fields').hide(); //this works
}
You can't change hidden input's "value" attribute by using .val(). You need to use:
$(link).prev("input[type=hidden]").attr('value', '1');
As I'm not really sure what do you want to do with this input, I'll just let it go like this.
.prev() fn goes only one previous element in the structure. As input is a <a>'s previous element, you can't select div like that. You can use .siblings() for instance.
$(link).siblings('div').hide();
If you break the code in pieces, it gets easier.
First I took the 'Link', from it I grabbed the nearest div above it, then I picked up the input.
I did not make many changes to your code.
function remove_fields(link)
{
var $link =$(link);
var $divToHide = $link.closest('div');
$divToHide.find("input[type='hidden']").val('1');
$divToHide.hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div id="test_fields">
<li id="test_input" class="string input optional stringish">
<label class="label" for="test_input">Ingredient name</label>
<input type="text" name="test_input" value="afsfasf" id="test_input">
</li>
</div>
<input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
Remove Ingredient
</div>
</div>

Javascript check bootstrap checkbox by id

I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).

Count how many checkbox have been checked

I am using the following code to check how many checkbox user has checked.
var empty_watch = $('#clocks').find('input.checkbox:checked').length;
This is used in form validation: if empty_watch is 0 then do not post form: user must choose at least one item (and there is not a default one).
HTML is the following:
<div id="clocks" class="sez-form">
<fieldset>
<legend> Orologi inclusi </legend>
<div class="percheckbox">
<input class="clock" type="checkbox" value="1" name="orologio">Browser
</div>
<div class="percheckbox">
<input class="clock" type="checkbox" value="2" name="orologio">Prototipo1
</div>
<div class="percheckbox">
<input class="clock" type="checkbox" value="3" name="orologio">test FP
</div>
<br style="clear: both;">
</fieldset>
</div>
Even if I check all the checkboxes empty_watch is still 0. What am I doing wrong?
Your find selector:
'input.checkbox:checked'
looks for an input with a class of 'checkbox'. You should be looking at the 'type' attribute of the element.
Instead try:
'input[type="checkbox"]:checked'
There is a specific :checkbox pseudo selector. It does the same as input[type=checkbox]:
var empty_watch = $('#clocks').find(':checkbox:checked').length;
As you already target #clock then find, this will be pretty good speed-wise too.
You could reduce it slightly, to the following, if you know there are no other checkable inputs:
var empty_watch = $('#clocks').find(':checked').length;

traversing this with jquery gives me undefined

When I click .getdata, I want to go from .getdata to name=top and read the value of whichever option is selected (in this case it's 0), but I'm having a hard time getting to it. I keep getting undefined.
This is my html. The div class="main" repeats so I can't simply select input[name=top]. It would have to be through traversing the tree to the closest input[name=top]. Can someone get this right? I'm starting to think it's a browser error because I tried different options and all give me undefined.
<div class="main">
<div class="branch">
<div class="element">
<label>top color:</label>
<input type="radio" value="1" name="top">black
<input type="radio" value="0" name="top" checked="checked">white
<input type="radio" value="null" name="top">transparent
</div>
</div>
<div class="controls">
<a class="getdata">get data</a>
</div>
</div>
<div class="main">
....
</div>
$('a.getdata').click(function() {
var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});
Place a click()(docs) event on the <a> element
On a click, use the closest()(docs) method to traverse up to the .main element
Then use the find()(docs) method along with the the attribute-equals-selector(docs) and the checked-selector(docs) to get the checked name="top" radio.
Finally use the val()(docs) method to get its value.
$(".getdata").click(function(){
selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
console.log(selectedValue);
});

Categories