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>
Related
There are two radio buttons separately. Have different name values. I'm trying to add a css to the div element when both are "checked".
$(document).ready(function(){
$('input[name="nameone"]').click(function(){
if($(this).is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
Just add a second if condition like you do for the input[name="nameone"]:
function showDiv() {
if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
$(".calculate-total").css("display", "block")
}
}
$(document).ready(function() {
$('input[name="nameone"], input[name="nametwo"]').click(function() {
showDiv();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
Just check if both of them are checked:
$(document).ready(function(){
$('input[name="nameone"], input[name="nametwo"]').click(function(){
if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
You are only checking if the first radio input is clicked (checked), that's why you the div is showing when you click on the first radio input. You should listen/check for both. If both are clicked (checked). Then that's when you want to do something. You can use the && to get the job done
function showDiv() {
if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
$(".calculate-total").css("display", "block")
}
}
$(document).ready(function() {
$('input[name="nameone"], input[name="nametwo"]').click(function() {
showDiv();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
You have to check if all radio buttons are checked and based on this check you can toggle the visibility of the block.
I added a class to the radiobuttons you want to check. And only if the length of all radiobuttons is equal to the checked onces i show the calculate-total div
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
if ($('.check-it').filter(':checked').length === $('.check-it').length) {
$(".calculate-total").css("display", "block")
} else {
$(".calculate-total").css("display", "none")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" class="check-it" /> Nameone radio
</label>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" class="check-it" /> Namtwo radio
</label>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
You need to listen for both radio buttons and check for both each time:
$(document).ready(function(){
$('input:radio').change(function(){
if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</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 this code, when im trying to toggle the checkbox (I can view the changes in inspect), the value of the checkbox doesnt change
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value=""/>
</div>
checkout with value
if ($(this).prop("checked") == true) {
$("h2 span").text(checkBoxval);
}
$(document).ready(function() {
var $checkBox = $("[type='checkbox']");
var checkBoxval = $checkBox.val();
$("h2 span").text(checkBoxval);
$checkBox.on("click", function() {
if ($(this).prop("checked") == true) {
$("h2").show();
$("h2 span").text(checkBoxval);
} else {
$("h2").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="My Checkbox value" checked="true">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value="" />
<h2>Your value is <span></span></h2>
</div>
Well, we can't see you js code but, you SHOULDN'T duplicate an id attribute like you did with NCONF_RSN1
You given the same id to both input element, give two different id. Then it will work
Figured out my problem, added "_" on hidden id
Instead of id="NCONF_RSN1" i used id="NCONF_RSN1_".
i just tried it, i dont know how it worked.
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1_" value=""/>
</div>
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>
I am trying to implement a script that will enable a submit button once a check-box is checked.
I am following an example found here: http://jsfiddle.net/chriscoyier/BPhZe/76/
I have added the following java-script code to my page but it doesn't seem like the script is executing properly. I do not see any errors in the console however.
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Form Code:
<FORM ACTION="signature_action.cfm?ticket_id=#url.ticket_id#&device=pc" METHOD=POST NAME="SigForm">
<div align="center">
<h2>STEP 1</h2>
<strong>Select the type of signature that is being captured:</strong><br />
<table><tr><td align="left">
<div id="format">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
</span><br />
<input name="tech_name" type="hidden" value="#url.tech_name#">
</div>
<input name="hidden" type="hidden" value="#url.tech_name#">
<input type="submit" name="submit" value="STEP 4 - SAVE SIGNATURE" disabled>
</form>
I am new to javascript and I am strugling a bit. Doesn't this need to run once the DOM is ready? (I am not sure how to do that!)
Can someone point me in the right direction?
As per this article: How to add onDomReady to my document?, I put my code inside:
window.onload = function() {
//code here
}
The event that must be listened is "change".
$( document ).ready(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.on('change', function() {
submitButt.attr('disabled', !this.checked);
});
});