Develop Reference

Checkbox on change event is not working on Safari

Thanks in advance for the help on this. I have a special requirement on my page where I needed a checkbox to "act" like a radio button, so only one can be checked at a time. To achieve that I used this snippet below"
<script>
$('input:checkbox').on('change', function() {
$('input:checked').not($(this)).closest('.w-checkbox').click();
});
</script>
It works perfectly on Chrome. However, it doesn't work on Safari and allows more than one checkbox to be clicked. I was wondering if anyone had ideas on how to solve this because I have tried many alternatives and unfortunately need to have the checkbox

The proper way to uncheck a checkbox is by changing the checked property.
$('input:checkbox.w-checkbox').change(function() {
$('input:checkbox.w-checkbox').not(this).prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="w-checkbox" />
<input type="checkbox" class="w-checkbox" />
<input type="checkbox" class="w-checkbox" />

jQuery Select Check Box with Label

I have a simple bit of jquery which is running a trigger on click of a radio button to check my check boxes.
<script>
jQuery('#op5').click(function () {
$('input[type=checkbox]').trigger('click');
});
</script>
These are my checkboxes they have labels to give them a custom style.
<input type="checkbox" certificate="true" checked="checked" id="gridcb0" siteid="1381" value="72218" class="custom selector checkedFocus">
<label for="gridcb0" class="white"> </label>
And this is the radio button I am clicking to check the checkboxes
<input type="radio" id="op5" value="1" name="options2" class="custom">
However it is not checking my check boxes on first click it requires me to click on the radio button op5 twice to check the boxes, I do not want to run the line below twice to highlight these check boxes
<input type="radio" id="op5" value="1" name="options2" class="custom">
Suggestions?

Use .prop() property and add value checked instead of trigger click
If you are using jQuery 1.6+
jQuery('#op5').click(function () {
$('input[type=checkbox]').prop('checked', true);
});
Docs: https://api.jquery.com/prop/

try below code
jQuery('#op5').click(function () {
$('input[type=checkbox]').attr('checked', true);
});

Which version of jQuery you are using
For jQuery 1.6+, Use the new .prop() function and for jQuery 1.5.x and below, use .attr() function
// jQuery 1.6+
$('#op5').click(function () {
$('#gridcb0').prop('checked', true);
});
// jQuery 1.5.x and below
$('#op5').click(function () {
$('#gridcb0').attr('checked', true);
});
Check this post for more details -
Setting "checked" for a checkbox with jQuery?

Try prop() and trigger():
Since you have id, you can use id selector
$('#gridcb0').prop('checked', true).trigger('click');
If you still want to target all checkbox:
$('input[type=checkbox]').prop('checked', true).trigger('click');

Reload div at checkbox click

Is it possible for me to reload a div when a checkbox in the same document is clicked?
<html:checkbox property="checkbox" styleId="checkbox">
<div id="divToBeRefreshed">
//content
</div>
I'd rather do it using pure javascript but ajax is ok too if there isn't another solution.

Well the answer by #karthick is for change event it will reload the content if the checkbox is unchecked also you can use the below code
$('#checkbox').change(function(){
if($(this).is(':checked')){
// Checkbox is checked.
$("#divToBeRefreshed").html('your content');
}else{
// Checkbox is not checked.
}
});
make your id of checkbox is set to
id='checkbox'
Hope this help you

try this
$("#checkbox").on('change',function(){
$("#divToBeRefreshed").html('your content');
});

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse.Hope this is what u meant mate
HTML
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<div id="divToBeRefreshed">
</div>
JS
$("input[name=vehicle]").on('change',function(){
$("#divToBeRefreshed").html($(this).val());
});
if you want to fire an event when a checkbox is checked / unchecked: use the below code too.
if( $(this).is(':checked') )
Fiddle
http://jsfiddle.net/BzgrW/

Two Checkboxes Being Checked at the Same Time

I have two checkboxes. What I need is when someone checks one of the boxes, it will automatically check the other one as well. And vice versa, if someone unchecks one of the boxes, it unchecks both. This is a bundle package on the form and they can not get one without the other.
<input type="checkbox" id="chk1" name="chk1" value="100">Voicemail<br />
<input type="checkbox" id="chk2" name="chk2" value="50">VM Support
Any help is greatly appreciated!

Why not this?
<input type="checkbox" id="chk1" name="chk1" value="100">
<label for="chk1">Voicemail and VM Support</label>

Assuming you want to only test these two checkboxes (and not every one on the page), you can use a jQuery Multiple Selector to access the onClick event for both. Using this you can test the checked status of the checkbox that was just clicked, and then assign that status of both checkboxes to match the one that was just clicked.
$('#chk1, #chk2').on('click', function(){
var checked = $(this).is(':checked');
$('#chk1, #chk2').attr('checked', checked);
});

Try this
$('#chk1 , #chk2').on('click', function(){
$('#chk1 , #chk2').attr('checked', $(this).is(':checked'))
});
FIDDLE
FIDDLE

HTML checkbox onclick called in Javascript

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.

How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.

Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>

You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>

jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.