I have a JavaScript function in place for a multiple choice quiz:
If the answer is 'Yes' - (checked by a checkbox) - Then a sub-question will appear, but if the user clicks 'No' the sub-question won't appear.
JavaScript
$(document).ready(function() {
var par = $('#SQ1');
$(par).hide();
$('#Q1').click(function(e) {
$(par).slideToggle('slow');
});
});
$(document).ready(function(){
$('#Q1NO').click(function(){
$('#SQ1').hide('slow');
});
})
Questions checkboxes
<div>
<input type="checkbox" id="Q1" name="chk[]" value="Yes"> Yes</input>
<br>
<input type="checkbox" id="Q1NO" name="chk[]" value="No"> No</input>
</div>
Sub-Question checkboxes
<div id="SQ1">
<div>
<input type="checkbox" name="chk[]" value="Yes 2" id="Q1R"> Yes</input>
<br>
<input type="checkbox" name="chk[]" value="No 2"> No</input>
</div>
</div>
I am inputting the values from the checkboxes into a database and the problem is that if the user clicked 'Yes' and then selected a box from the sub-question, but then changed their mind and clicked 'No' on the primary question, the sub-question will disappear, but the box is still checked inside it and it gets added to the database - Which I don't want.
Is there a way to uncheck an item within a div, on the click of the 'No' from the first div?
Thanks for reading
Uncheck all subquestions checkboxes:
$('#Q1NO').click(function(){
$('#SQ1').hide('slow')
.find('input:checkbox').prop('checked',false);
});
First of all there either should be radio button for Yes/no or only one checkbox. There are several ways to achieve your requirement. I have posted below easiest one. See if it helps.
function showHideSub(isChecked){
if(isChecked)
{
$("#sub").show()
}
else
{
$("#sub").hide()
$("#sub input[type=checkbox]").removeAttr("checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="Q1" name="chk[]" onclick="showHideSub(this.checked)" value="Yes"> Yes / No </input>
<br>
</div>
<div id="sub" style="display:none">
<input type="checkbox" name="chk[]" value="Yes 2" id="Q1R"> Yes/No</input>
</div>
Solution without loop as you can set properties on all query matches.
$('#Q1NO').click(function() {
par.hide('slow');
par.find("input[type=checkbox]").prop('checked', false);
});
Related
I am new in coding. I have two radio buttons. If a “yes” is selected in either from them a certain field (here kouAP) must be AUTOMATICALLY set to a value (in this case 0.56). The problems are:
how to make both radio buttons to set the value to a single field?
How to keep the wished value if one of the is “yes” and the other is “no”? No matter of the order of clicking.
My JQuery makes no sense :(
Thanks you
HTML
<label for="Pre002">ccs</lable>
<br />
<input type="radio" id="Pre002o" name="css" value="0">
<label for="Pre002o">none</label>
<input type="radio" id="Pre002d" name="css" value="4">
<label for="Pre002d">yes</label>
<br />
<label for="Pre066">mi</lable>
<br />
<input type="radio" id="Pre066a" name="mi" value="0">
<label for="Pre066a">yes</label>
<input type="radio" id="Pre066b" name="mi" value="1">
<label for="Pre066b">no</label>
<br />
<input id="kouAP" type=“text” name="kouAP" readonly="true" placeholder="kouAP">
<label for="kouAP">at least one yes</label>
JQuery
$('input[type=radio].css; input[type=radio].mi').click(function(e){
if ($(this).attr("id") == "Pre002d" || $(this).attr("id") == "Pre066a" ){
$("#kouAP").val(0.5677075);
}
else {
$("#kouAP").val(0);
}
});
There is nothing wrong with code.
Just provide the name of the element you listen the click from.
Replace:
$('input[type=radio].css; input[type=radio].mi').click(...);
With:
$('input').click(...);
or:
$('input[type=radio]').click(...);
to avoid future errors.
I just advice you to go through the basics again :)
EDIT
For the second question, I guess it's just a work around with if..else. Hope it helps.
$('input').click(function(e){
if ($('#Pre002d').is(':checked') || $('#Pre066a').is(':checked')){
$("#kouAP").val(0.5677075);
}
else{
$("#kouAP").val(0);
}
});
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
I have a group of check boxes that are all part of one array. What I require is that if the first one is selected (I don't mind), then any of the others are unselected, and vice versa - if one of the bottom three options are selected, then I don't mind needs to be unselected.
The last three options can all be selected at the same time.
This Link is similar to what I am asking to do. Any help would be appreciated
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
The code is exactly the same as the link you provided.
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
And then:
// We cache all the inputs except `#field_1071_0` with `:not` pseudo-class
var $target = $('input:not(#field_1071_0)');
$('#field_1071_0').on('change', function () {
// if 'i don't mind' is selected.
if (this.checked) {
// remove the 'checked' attribute from the rest checkbox inputs.
$target.prop('checked', false);
}
});
$target.on('change', function () {
// if one of the bottom three options are selected
if (this.checked) {
// then I don't mind needs to be unselected
$('#field_1071_0').prop('checked', false);
}
});
Demo: https://jsfiddle.net/426qLkrn/4/
I cannot remember an in-house feature of JavaScript or jQuery that makes it possible to solve your problem. So, you have to solve it by your own.
You can add a data attribute to your checkboxes where you list all the checkboxes (as an id) which cannot be selected at the same time with the current checkbox, e.g.:
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind" data-exclude="['field_1072_1','field_1072_2','field_1072_3']" />
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter" data-exclude="['field_1071_0']" />
...
Then, you add, for example, an onchange event to each of the checkboxes. This event checks whether the checkbox has changed to checked or to unchecked. If it has changed to checked, you have to uncheck all checkboxes within the list:
document.getElementById("field_1071_0").onchange= function(e) {
if (this.checked) {
this.dataset.exclude.forEach(function (exc) {
document.getElementById(exc).checked = false;
});
}
};
Or, with jQuery:
$("#field_1071_0").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
The good thing is: You can apply this function to each checkbox you want, e.g.:
$("input:checkbox").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
Now, each checkbox has the desired behaviour. So, this solution is a general way to solve it.
Comment: If you do not have access to the HTML code, i.e., to the input fields to add some information like the data-attribute, you can add those information via jQuery/JavaScript too:
$("#field_1071_0").data("exclude", ['field_1072_1','field_1072_2','field_1072_3']);
$("#field_1072_1").data("exclude", ['field_1071_0']);
...
jquery prop method can be used to pragmatically check or unchecked a check box. is can be use to evaluate if a condition is true or false.
Hope this snippet will be useful
// if first check box is selected , then checkedremaining three
$("#field_1071_0").on('change', function() {
//$(this) is the check box with id field_1071_0
// checking if first checkbox is checked
if ($(this).is(":checked")) {
//opt2 is a common class for rest of the check boxes
// it will uncheck all other checkbox
$(".opt2").prop('checked', false)
}
})
//unchecking first checkbox when any of the rest check box is checked
$(".opt2").on('change', function() {
if ($(this).is(":checked")) {
$("#field_1071_0").prop('checked', false)
}
})
<!--Adding a class `opt2` to the last three checkboxes-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" class="opt2" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" class="opt2" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair" class="opt2">Au Pair</label>
</div>
</fieldset>
I need some help because I’m not that experienced with checkboxes.
So, I have a list and each row have a checkbox, by the way this list is auto generated but whatever, what I want is to be able to create some group or a link between some of the checkboxes, that if I check one of them, the others get checked too, of course only the ones linked to that one that I checked.
If it's not possible please let me know.
I hope that you understood what I wrote, and sorry for my bad English. Thank you in advance!
ps: i'm using it in a JSP
Is it your expect? like follow code
<script>
function f(vobj,vname){
if(vobj.checked){
checkoruncheck(vname,'checked');
}else{
checkoruncheck(vname,'unchecked');
}
}
function checkoruncheck(vname,vf){
var boxs=document.getElementsByName(vname);
for(i=0;i<boxs.length;i++){
if(vf==='checked'){
boxs[i].checked=true;
}else{
boxs[i].checked=false;
}
}
}
</script>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')"> checkbox A <BR>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')"> checkbox B <BR>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')"> checkbox C <BR>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')"> checkbox D <BR>
<script>
function f(vobj,vname){
if(vobj.checked){
checkoruncheck(vname,'checked',vobj.value);
}else{
checkoruncheck(vname,'unchecked',vobj.value);
}
}
function checkoruncheck(vname,vf,value){
var boxs=document.getElementsByName(vname);
for(i=0;i<boxs.length;i++)
if( boxs[i].value==value)
if(vf==='checked')
boxs[i].checked=true;
else
boxs[i].checked=false;
}
</script>
<span></span>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')" value="22"> checkbox A <BR>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')" value="22"> checkbox B <BR>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')" value="1"> checkbox C <BR>
<input type="checkbox" name="checkboxname" onchange="f(this,'checkboxname')" value="3"> checkbox D <BR>
Here is what I was looking for. Thank you guys for the help.
I want to create the conditions in the radio button.
so I'm making a survey app with jquery ajax. every question has the option (radio button) and the button next to to the next question. without changing link
I want to create the conditions in the radio button. If select YES then it will go to the next question. If you select NO then the next question will pass 2
can help me please?
have you tried doing an attribute on your radio button like arnum that will track the n^th number of radio button.
<div arnum="3">
<input type="radio" skipval="3" value="yes">
<input type="radio" skipval="1" value="no">
</div>
<div arnum="4">
<input type="radio" value="something">
<input type="radio" value="else">
</div>
then:
$('div[arnum] input[type=radio][skipval]').on('click',function(){
var skipval = parseInt($(this).attr('skipval'));
var arnum = parseInt($(this).parent().attr('arnum'));
arnum++;
for(;arnum<arnum+skipval;arnum++){
$('div[arnum='+arnum+']').attr('disable','disable');
}
$('div[arnum='+arnum+']').focus();
});
this code on click skips to the next question using skipval and disables everything in between.
y this:
<input type="radio" name="test" value="1" />yes<br />
<input type="radio" name="test" value="2" />no
<div id="question2" style="display:none">
<br />Question 2<br />
</div>
<script>
$('input[name=test]').change(function () {
if ($(this).val() == 1) {
$('#question2').show();
} else {
$('#question2').hide();
}
})
</script>