HTML Form Radio Buttons and Checkboxes - javascript

I want to create a form in which if a radio button is selected, some checkboxes associated with it open up and the user must select at least one of the checkboxes under that radio button before submitting the form. For example refer to the codepen : https://codepen.io/anon/pen/zJKPRK. This is based on a dogs/cats tutorial I saw.
Here, item propagation is used to make all child items required:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
},
};
FormStuff.init();
Here at least 1 radio button needs to be selected and if ClassB or ClassC is selected, I want that the user should select at least one checkbox under that particular class. Any suggestions?

.length gives you the count of elements in your selection. $('input[type="checkbox"]').is(':checked').length > 0 tells you whether or not at least 1 Checkbox has been checked. Just add classes to your selector as desired.

Related

How can I select one group radio button from two groups and get the value of selected radio?

I want to select one group radio button from two groups and get the value of the selected radio in a variable and show it in another place.
function uncheckRadioBtnSet() {
if ($('[name="input_15"]').is(":checked").val()) {
$('input[name="input_17"]').removeAttr("checked");
jQuery(this).off("click");
} else {
$('input[name="input_15"]').removeAttr("checked");
$(this).off("click");
}
}
$("input[name='input_15']").click(function () {
$('input[name="input_17"]').prop("checked", false);
});
$("input[name='input_17']").click(function () {
$('input[name="input_15"]').prop("checked", false);
});

use Dojo to detect if all checkboxes are unchecked, disable a button

I have a group of checkboxes and a QUERY button so user can check a few things and click QUERY button to make a service call to return records. How to disable the QUERY button if none of the checkboxes are checked?
Below are the codes I wrote. The QUERY button got disabled when I first time unchecked all of them. But when I checked only one of checkboxes back again, the array "unchecked" became empty. please help!
_bindChkChangeEvent: function(){
var unchecked = [];
on(query('.chk'), 'change', lang.hitch(this, function(event) {
if(!event.target.checked){
if(unchecked.indexOf(event.target.id) < 0)
unchecked.push(event.target.id);
}
else{
if(unchecked.indexOf(event.target.id) > -1)
unchecked.splice(event.target.id);
}
this._switchQueryBtn(unchecked);
}));
},
_switchQueryBtn: function(unchecked){
if(unchecked.length == 10)
html.addClass(this.btnQuery, 'disabled');
else
html.removeClass(this.btnQuery, 'disabled');
},
At the following link a working example, you can try to adopt this concept to your code (unfortunately the question contains only a partial code view).
https://jsfiddle.net/zmh7bbrf/
What the script does:
Create two checkboxes programmatically.
Create a button programmatically.
Add event handler onChange for each checkbox.
Function showHideButton actually contains the logic to show or hide the button.
Now when the page load, both checkboxes are unchecked, showHideButton runs and button is being disabled.
When User click on a checkbox, re-run function showHideButton.
At this point condition is not met, as one checkbox is checked now, so re-enable the button.
The script could work with any number of checkboxes, just add their reference and modify the logic in showHideButton function.
Notes:
You can use dijit/registry to find references of your widgets, instead of using dojo/query and querying the DOM directly as in the code in your original question.
More information on dijit/registry can be found here:
https://dojotoolkit.org/reference-guide/1.10/dijit/registry.html
require(["dijit/form/CheckBox", "dijit/registry", "dijit/form/Button", "dojo/domReady!"], function(CheckBox, registry, Button) {
new CheckBox({
id: "checkBox0",
name: "checkBox0",
value: "option0",
checked: false,
onChange: function(event) {
showHideButton();
}
}, "checkBox0").startup();
new CheckBox({
id: "checkBox1",
name: "checkBox1",
value: "option1",
checked: false,
onChange: function(event) {
showHideButton();
}
}, "checkBox1").startup();
new Button({
label: "Click me!",
onClick: function() {;
}
}, "button").startup();
var showHideButton = function() {
var checkBox0 = registry.byId('checkBox0'),
checkBox1 = registry.byId('checkBox1'),
button = registry.byId('button');
if (!checkBox0.checked && !checkBox1.checked) {
button.set('disabled', true);
} else {
button.set('disabled', false);
}
};
showHideButton();
});
<input id="checkBox0" />
<label for="checkBox">Option 0</label>
<br>
<input id="checkBox1" />
<label for="checkBox">Option 1</label>
<br>
<button id="button" type="button"></button>

Checkbox to control radio buttons

I have a checkbox and 3 radio buttons, I'm trying to have one of the radio buttons selected if the checkbox is checked and have any of them un-selected if the checkbox is unchecked.
My solution works on the first run, but wont select the radio button after the first click.
$('#checkbox-h-2g').click(function () {
if ($('#checkbox-h-2g').is(":checked")) {
$('#r1').attr('checked', true);
}if (!$('#checkbox-h-2g').is(":checked")) {
$('#r1 , #r2, #r3').attr('checked', false);
}
});
Use .prop() instead of .attr() to set properties, Also your code can be improved as
$('#checkbox-h-2g').change(function () {
if (this.checked) {
$('#r1').prop('checked', true);
}else{
$('#r1 , #r2, #r3').prop('checked', false);
}
});

Clearing/Un-selecting Radio button on second click

I have a LOT of radio buttons on a form I'm creating.
The reason why I am using radio buttons and not check box's is because I only want to let a user select one or none.
The bad thing about a radio button though is, once selected, it can't be undone. I am trying to add the feature of clearing a group of radio box's when it's clicked for the second time.
My method that I am implementing now works if I have a group of radio buttons I want to target individually but not if I want to implement it for ALL radio button groups on the page.
When I use multiple radio button groups, it will randomly un-select a radio button when I try to select a different option.
If anyone could help me out, it would be greatly appreciated.
JSFIDDLE for only one group of radio buttons (works)
If you change to this code instead and target an individual name, it works.
$('input[name="rad"]').click(function()
JSFIDDLE for multiple groups of radio buttons (doesn't work)
I am trying to be able to target all my radio button groups at once, because there are a LOT.
$(function(){
$('input[type="radio"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
});
});
So you just need a way to check/uncheck reliably by name groups.
Something like this should work:
$('input[type="radio"]').on('click change', function () {//on click/change
$(this).prop('checked')//if checked
? $(this).prop('checked',false).data('waschecked', false)//uncheck
: $(this).prop('checked',true).data('waschecked', true)//else check
.siblings('input[name="'+$(this).prop('name')+'"]').data('waschecked', false);//make siblings false
});
kept the .data('waschecked', ...) in case you needed to have that value, but it works without it like this:
$('input[type="radio"]').on('click change', function () {//on click/change
$(this).prop('checked')//if checked
? $(this).prop('checked',false)//uncheck
: $(this).prop('checked',true);//else check
});
made a fiddle: http://jsfiddle.net/filever10/ZUb65/
Try changing the line to use the name attribute of the clicked radio in the selector expression
$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
You just need to clear your "waschecked" flag on the other radios of the same group.
http://jsfiddle.net/jammykam/BtLxY/15/
And just in case you do need to target using onchange: http://jsfiddle.net/jammykam/BtLxY/27/
$('input[type="radio"]').on('change', function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
});
If you are using a simple primary to secondary relationship then try this out:
$('input[type="radio"][name="main_radios"]').on('change', function(){
$('input[type="radio"][name="secondary_radios"]').prop('checked', false);
$('input[type="radio"][name="third_radios"]').prop('checked', false);
$('input[type="radio"][name="fourth_radios"]').prop('checked', false);
// combine it all into one call if you really feel like it
$('input[type="radio"][name="secondary_radios"], input[type="radio"][name="third_radios"], input[type="radio"][name="fourth_radios"]').prop('checked', false);
});
Uncheck all radios that are not "this" name
// Listen for ANY radio to be changed
$('input[type="radio"]').on('change', function(){
// remember name of selected radio
var checked_name = $(this).attr('name');
// target only radios that are not "this" name and uncheck them
$('input[type="radio"]').filter(function(){
if($(this).attr('name') != checked_name){
return true;
}
else{
return false;
}
}).prop('checked', false);
});

Check/Uncheck all checkboxes

I've seen many check/uncheck all checkboxes scripts. But far most does not respect that if I toggled all checkboxes using the "checked all"-checkbox and then uncheck a single one in the list, the "checked all" checkbox is still checked.
Is there an elegant way of handling this case?
$('#checkAll').click(function() {
if(this.checked) {
$('input:checkbox').attr('checked', true);
}
else {
$('input:checkbox').removeAttr('checked');
}
});
$('input:checkbox:not(#checkAll)').click(function() {
if(!this.checked) {
$('#checkAll').removeAttr('checked');
}
else {
var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
var numTotal = $('input:checkbox:not(#checkAll)').length;
if(numTotal == numChecked) {
$('#checkAll').attr('checked', true);
}
}
});
Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/
As pointed out in the question's comment, a regular checkbox is not perfect for this. My implementation disables the "check all" box as soon as one checkbox is unchecked. So, to uncheck all still-checked checkboxes you'll have to click twice (first to re-check the unchecked ones and then to uncheck all other ones).
However, with a tri-state checkbox this might still be necessary as the state order might be unchecked->indefinite->checked->unchecked, so you'd need two clicks to come from indefinite to unchecked.
Since you probably don't want to check ALL checkboxes on your page with "Check All", replace input:checkbox with e.g. .autoCheckBox or input.autoCheckBox:checkbox and give those checkboxes class="autoCheckBox".
If you want all checkboxes inside a certain form, simple use #idOfYourForm input:checkbox or form[name=nameOfYourForm] input:checkbox
You can achieve this by attaching a click handler to each of the target checkboxes, and have that handler un-check the "control" checkbox based on the collective state of those target checkboxes. So, something like this:
// Control checks/unchecks targets
$('#controlcheckbox').click( function(){
$('.targetcheckboxes').attr('checked', this.checked );
});
// Targets affect control
$('.targetcheckboxes').click( function(){
if( $('.targetcheckboxes:not(:checked)').length ){
$('#controlcheckbox').attr('checked',false);
}
});
Even better -- you could attach this logic to an enclosing container element, and watch for the event using .delegate():
$('#some_container').delegate('.targetcheckboxes','click',function(){...} );
$("#selectall").click(function(){
var checked = $("#selectall").attr("checked");
$(".selectone").attr("checked",checked);
});
For setting select all
$(".selectone").click(function(){
var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
var flg = true;
if(jQuery.inArray(false, net)){
flg= false;
}
$("#selectall").attr("checked",flg);
});
Perhaps something like this:
$('tbody input:checkbox').change(function(){
if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) {
$('#checkAll')[0].checked = false;
}
});
This assumes that #checkAll is in the thead section of your table.

Categories