I have a checkbox inside a P with class vertical options. I have written script to implement checkbox functionality even on clicking the P. The code is:
$(".vertical-options,.horizontal-options").click(function(event){
var input = $(this).find('input').first();
console.log(input);
if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) {
if(input.is(':checked')){
input.prop('checked', false);
} else {
input.prop('checked', true);
}
}
});
but with this logic clicking on the checkbox label does not work. What am I doing wrong?
You need to use label tag for this purpose. Write id of target checkbox in for attribute of label tag.
<label for="id1">Checkbox-1</label>
<input type="checkbox" id="id1" />
<label for="id2">Checkbox-2</label>
<input type="checkbox" id="id2" />
<label for="id3">Checkbox-3</label>
<input type="checkbox" id="id3" />
If you want to do this work using jquery for other tag, see example
$("p").on("click", function(e){
var checkbox = $(this).find(':checkbox');
if ($(this).is(e.target))
checkbox.prop('checked', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Checkbox-1
<input type="checkbox" />
</p>
<p>
Checkbox-2
<input type="checkbox" />
</p>
<p>
Checkbox-3
<input type="checkbox" />
</p>
Related
I have this code:
$(document).on('click','.subject_add',function() {
var $ele = $("input[type='checkbox']");
var $btn = $(this);
var $sameCheck = $btn.attr('id') && $ele.is(':checked') == $ele.attr('id').split('_')[2];
alert($sameCheck);
if(!$ele.is(':checked')) {
Swal.fire('Oops','Please select the Add-on','error');
return;
}
if($sameCheck) {
Swal.fire('Oops','Please select the correct Add-on for the button','error');
return;
}
}
I am trying to make sure that every checkbox checked from the button which has the same ID. But possibly something is going wrong where it is not matching the same checkbox with same button.
my html:
<div align="left">
<p>
<input type="checkbox" class="checkboxid" name="subject_add" id="subject_add_3">
Yes</p>
<p>
<input type="checkbox" class="checkboxid" name="subject_add" id="subject_add_4">
Yes</p>
</div>
Is that closer to what you want?
When a click is made on a .subject_add link, there is an error message if the checkbox was not checked.
It uses .siblings() to target the sibling checkboxes. No need for any id here. Just check if the checked count is the same as the checkbox count.
It would be easier to debug if you use a Swall error and a Swall success... With two error messages, sure it is getting confusing. ;)
$(document).on('click', '.subject_add', function() {
let boxCount = $(this).siblings("input[type='checkbox']").length
let checkedCount = $(this).siblings("input[type='checkbox']:checked").length
if (checkedCount) {
Swal.fire('Okay!', 'The checkbox is checked', 'success');
}
else{
Swal.fire('Oops', 'Check the checkbox first.', 'error');
}
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.14.0/sweetalert2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.14.0/sweetalert2.min.js"></script>
<div align="left">
<p>
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
Yes</p>
<p>
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
Yes</p>
</div>
I have checkboxes, each with a unique id. When a 'parent' is checked, the 'child' checkboxes should also be checked. The problem is that 'parent' checkboxes are associated with children based on the ID, not the element hierarchy since they are all at same level:
<div id="checkinline">
<input type="checkbox" id="CC__100"></input> <- 'parent'
<input type="checkbox" id="CC__10010"></input>
<input type="checkbox" id="CC__10020"></input>
<input type="checkbox" id="CC__10030"></input>
<input type="checkbox" id="CC__10040"></input>
</div>
When CC__100 is checked, I need all checkboxes with ids prefixed by CC__100 to also be checked.
My attempt so far:
$("div#" + id + " :input").each(function () {
var input = $(this);
var element_id = input.prop('id');
var element_type = input.prop('type');
if (element_type === 'checkbox') {
if (element_id == i miss this) {
$(this).prop('checked', true)
}
}
})
You can try this using attribute starts with selector [id^="value"]:
$('.chk :checkbox').on('change', (e) => {
$(e.target).nextAll('[id^="'+ e.target.id +'"]').prop('checked', e.target.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chk">
<input type="checkbox" id="CC__100" />
<input type="checkbox" id="CC__10010" />
<input type="checkbox" id="CC__10020" />
<input type="checkbox" id="CC__10030" />
<input type="checkbox" id="CC__10040" /><br/>
<input type="checkbox" id="CC__200" />
<input type="checkbox" id="CC__20010" />
<input type="checkbox" id="CC__20020" />
<input type="checkbox" id="CC__20030" />
<input type="checkbox" id="CC__20040" />
</div>
You are thinking way to complicated, you should check if the "parent" 'changes'. When it's check state is checked then check all the elements with an id that starts with 'CC__100'.
That's the "[id^='CC__100']" part (selectors).
$("#CC__100").change(function () {
if (this.checked) {
$("[id^='CC__100']").prop("checked", true);
}
});
Codepen
You can use the starts with ([attr^=value]) attribute selector to find elements with an id that starts with the id of the checkbox that was just checked.
$('input[type=checkbox]').click(e => {
const { target } = e;
// Children have an ID that start with the id of the select checbox, but don't have the exact id
const children = $( `input[type=checkbox][id^=${target.id}][id!=${target.id}]` );
// Set children to the value of the parent:
children.prop( 'checked', $(target).prop('checked') );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkinline">
<input type="checkbox" id="CC__100"><label for="CC__100">Parent 100</label><br>
<input type="checkbox" id="CC__10010"><label for="CC__10010">Child 10010</label><br>
<input type="checkbox" id="CC__10020"><label for="CC__10020">Child 10020</label><br>
<input type="checkbox" id="CC__10030"><label for="CC__10030">Child 10030</label><br>
<input type="checkbox" id="CC__10040"><label for="CC__10040">Child 10040</label><br>
<br>
<input type="checkbox" id="CC__200"><label for="CC__200">Parent 200</label><br>
<input type="checkbox" id="CC__20010"><label for="CC__20010">Child 20010</label><br>
<input type="checkbox" id="CC__20020"><label for="CC__20020">Child 20020</label><br>
<input type="checkbox" id="CC__20030"><label for="CC__20030">Child 20030</label><br>
<input type="checkbox" id="CC__20040"><label for="CC__20040">Child 20040</label><br>
</div>
I have three radio each one has name started with delivery_option and a submit button with css class continue. I want to test if a radio is checked the button must be enabled, otherwise it should be disabled.
i made the code below
$(document).ready(function() {
$('#checkout-delivery-step input:radio').each(function() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
});
});
but it does not work, what was the issue?
You are running the code only once. The code has to be run every time when the radio button is clicked or changed. So you need to use the following:
// Make this a function.
function checkProgress() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
}
$(function () {
// Set the status once the doc loads.
checkProgress();
// Set it again when any of the radio buttons are clicked.
$("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
Snippet
// Make this a function.
function checkProgress() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
}
$(function () {
// Set the status once the doc loads.
checkProgress();
// Set it again when any of the radio buttons are clicked.
$("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Group 1</h3>
Option 1: <input type="radio" name="delivery_option_1" />
Option 2: <input type="radio" name="delivery_option_1" />
Option 3: <input type="radio" name="delivery_option_1" />
<h3>Group 2</h3>
Option 1: <input type="radio" name="delivery_option_2" />
Option 2: <input type="radio" name="delivery_option_2" />
Option 3: <input type="radio" name="delivery_option_2" />
<p>Submit?</p>
<input type="button" value="Submit" class="continue" disabled />
You can try something like this with removeAttr which will remove the attribute from any element which is already set.
Also, for the radio you can do this way, once it is clicked then you can enable the button because it doesn't provide a way to deselect it.
Finally, the name for elements can be the same if it is a group and only the id must be unique. Check here.
So, proper code will be
<label for="delivery_option1">Option1:</label><input type="radio" id="delivery_option1" name="delivery_option" />
<label for="delivery_option2">Option2:</label> <input type="radio" id="delivery_option2" name="delivery_option" />
<label for="delivery_option3">Option3:</label><input type="radio" id="delivery_option3" name="delivery_option" />
$(function(){
$("input:radio[name*='delivery_option']").click(function(){
$(".continue").removeAttr("disabled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Option1: <input type="radio" name="delivery_option1" />
Option2: <input type="radio" name="delivery_option2" />
Option3: <input type="radio" name="delivery_option3" />
<input type="button" value="Submit" class="continue" disabled />
I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$(document).on('click','[id^=element-]', function(e) {
console.log(this.id);
});
} else {}
});
I tested this example and it's not working. I have not idea when I'm wrong.
The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:
$(document).on('click', '[id^="element-"]', function(e) {
if ($('#checkbox1').is(':checked'))
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox1" />
Check me!
</label>
<div>
<button id="element-foo">Foo</button>
<button id="element-bar">Bar</button>
</div>
I tested it out, and this will work for you
$("input[id^=d]").on("click", function() {
var id = $(this).prop("id");
if ($("#c1").is(":checked")) {
console.log(id);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />
I want change name attribute in <input> element, I have in the here several name string[0][], now i want after click on link add change 0 in they and replace 1 instead all 0. How is it by Jquery?
DEMO: http://jsfiddle.net/2hXk5/
I try as but don't work for me:
<div class="ch">
<p>
<input type="checkbox" name="cDA[0][]">
<input type="checkbox" name="cDA[0][]">
<input type="checkbox" name="cDA[0][]">
<input type="checkbox" name="cDA[0][]">
</p>
<p>
<input type="checkbox" name="cFE[0][]">
<input type="checkbox" name="cFE[0][]">
<input type="checkbox" name="cFE[0][]">
<input type="checkbox" name="cFE[0][]">
</p>
<p>
<input type="checkbox" name="cYG[0][]">
<input type="checkbox" name="cYG[0][]">
<input type="checkbox" name="cYG[0][]">
<input type="checkbox" name="cYG[0][]">
</p>
Add
</div>
$('a.adding').live('click change', function (e) {
e.preventDefault();
$clone = $(this).closest('.ch').clone().insertAfter('.ch');
$clone.find('input[type="checkbox"]:contains("0")').prop('1');
})
If I understand you correctly, you want to use .attr() with a callback function:
$('input[type="checkbox"]').attr('name',function(i,str) {
return str.replace('0','1');
});
UPDATE: Here's a complete version which will do everything you seem to actually want. It uses str.match(/\d+/) to extract the FIRST number-string in the name attribute, converts it to an integer, then replaces it with the next integer using str.replace. Note the insertAfter part was updated so it only inserts after the LAST div.ch:
$(document).on('click change', 'a.adding', function(e) {
e.preventDefault();
$div = $(this).closest('.ch');
$clone = $div.clone().insertAfter($div);
$clone.find('input[type="checkbox"]').attr('name', function(i, str) {
var int = parseInt(str.match(/\d+/)[0],10);
return str.replace(int, (int+1));
});
});
http://jsfiddle.net/mblase75/3SGNw/