简体   繁体   中英

How to set a different values to an input fields after selecting a combination of radio buttons using AND and OR selection in JQuery?

So the problem is this: I have 6 pairs of radio buttons each represents a “yes/no” statement.

I have also 4 read-only input fields to which I need to assign a value (1 or 0) after the user selects a combination of radio buttons.

The problem is that there are rules for value assignment:

  1. if (question 1) OR (question 2) are “yes” -> combi(1) =1, combi(2, 3, 4)=0 (that was easy. My code works)

  2. If (question 3) OR (question 4) OR (question 5) are “yes” -> combi(2) =1, combi(1,2,4)=0 (that was easy. My code works)

  3. If (question 1) AND [(question 2) OR (question 3) OR (question 4)] are “yes” -> combi(3)=1, combi(1,2,4)=0 (here is the problem No 1)

  4. If (question 1) AND [(question 2) OR (question 3) OR (question 4)] AND (question 5) are “yes” -> combi(4)=1, combi(1,2,3)=0 (here is the problem No 2)

  5. If (question 1,2,3,4,5) are NO -> combi(1,2,3,4)=0 . (that was easy. My code works) .

The problem short - I need to make a AND and OR selection in JQuery based on the selected buttons. So here is my code. I think the third and fourth “else if” are with wrong selection

Question 1
<input id="q1a" type="radio" name="q1"> yes
<input id="q1b" type="radio" name="q1"> no
<br/>
Question 2
<input id="q2a" type="radio" name="q2"> yes
<input id="q2b" type="radio" name="q2"> no
<br/>
Question 3
<input id="q3a" type="radio" name="q3"> yes
<input id="q3b" type="radio" name="q3"> no
<br/>
Question 4 
<input id="q4a" type="radio" name="q4"> yes
<input id="q4b" type="radio" name="q4"> no
<br/>
Question 5
<input id="q5a" type="radio" name="q5"> yes
<input id="q5b" type="radio" name="q5"> no
<br/>
Question 6
<input id="q6a" type="radio" name="q6"> yes
<input id="q6b" type="radio" name="q6"> no
<br/>

<input id="combi1" type="text" readonly="true">Combi1<br/>
<input id="combi2" type="text" readonly="true">Combi1<br/>
<input id="combi3" type="text" readonly="true">Combi1<br/>
<input id="combi4" type="text" readonly="true">Combi1<br/>

JQuery 
$('input').click(function(e){
if ($('#q1a').is(':checked') ||
$('#q2a').is(':checked')){
$('#combi1').val(1) &&
$('#combi2').val(0) &&
$('#combi3').val(0) &&
$('#combi4').val(0);
}
else if ($('#q3a').is(':checked') ||
$('#q4a').is(':checked') ||
$('#q5a').is(':checked')){
$('#combi1').val(0) &&
$('#combi2').val(1) &&
$('#combi3').val(0) &&
$('#combi4').val(0);
}
else if ($('#q1a').is(':checked') &&
$('#q3a').is(':checked') ||
$('#q4a').is(':checked') ||
$('#q5a').is(':checked')){
$('#combi1').val(0) &&
$('#combi2').val(0) &&
$('#combi3').val(1) &&
$('#combi4').val(0);
}
else if ($('#q1a').is(':checked') &&
$('#q3a').is(':checked') ||
$('#q4a').is(':checked') ||
$('#q5a').is(':checked') &&
$('#q6a').is(':checked')) {
$('#combi1').val(0) &&
$('#combi2').val(0) &&
$('#combi3').val(0) &&
$('#combi4').val(1);
}
else if ($('#q1b').is(':checked') &&
$('#q2b').is(':checked') &&
$('#q3b').is(':checked') &&
$('#q4b').is(':checked') &&
$('#q5b').is(':checked')){
$('#combi1').val(0) &&
$('#combi2').val(0) &&
$('#combi3').val(0) &&
$('#combi4').val(0);
}
})

I solve it! Here it is how: First I did revised the logic bearing in mind that 的确修改了逻辑。 and - meaning I put the most complex combination as first in the if/else sequence and the most simple as last. -这意味着我将最复杂的组合放在if / else序列中的第一位,而最简单的末尾。 Then I followed the advice of and I did add an extra parentheses to combine the && and || 的建议,并且确实添加了一个额外的括号来组合&&和||。 properly. And now it works!

Here is the working code. If someone have a better or shorter version I am opened for it!!!

$('input').click(function(e){
if ($('#q1a').is(':checked') &&
$('#q6a').is(':checked') &&
($('#q3a').is(':checked') ||
$('#q4a').is(':checked') ||
$('#q5a').is(':checked'))) {
$('#combi1').val(0) &&
$('#combi2').val(0) &&
$('#combi3').val(0) &&
$('#combi4').val(1);
}
else if (($('#q1a').is(':checked')) &&
($('#q3a').is(':checked') ||
$('#q4a').is(':checked') ||
$('#q5a').is(':checked'))){
$('#combi1').val(0) &&
$('#combi2').val(0) &&
$('#combi3').val(1) &&
$('#combi4').val(0);
}
else if ($('#q3a').is(':checked') ||
$('#q4a').is(':checked') ||
$('#q5a').is(':checked')){
$('#combi1').val(0) &&
$('#combi2').val(1) &&
$('#combi3').val(0) &&
$('#combi4').val(0);
}
else if ($('#q1a').is(':checked') ||
$('#q2a').is(':checked')){
$('#combi1').val(1) &&
$('#combi2').val(0) &&
$('#combi3').val(0) &&
$('#combi4').val(0);
}
else {
$('#combi1').val(0) &&
$('#combi2').val(0) &&
$('#combi3').val(0) &&
$('#combi4').val(0);
}
})

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM