2
この質問には多くのコードがありますが、それがなければ正しく動作しません。ラジオボタンとJQueryの条件式
問題： 私は一定の成果を組み合わせリードを選択したように、ラジオボタンを使用して条件文を設定しようとしています。 私は複数のアプローチに疲れましたが、どれも成功していませんでした。前の質問でのユーザーの応答は、その例でのみ動作します（これは私が試したものです）
以下のコードは期待どおりではありません。
合計で5つの質問があります。各質問に回答するまでdivを非表示にしています。 最初のもので「はい」をクリックすると、それ以外の場合はALL YESと表示されます。 最初の「いいえ」をクリックすると、それ以外の場合はALLの結果が返されます。 その間に出力として混合応答が得られます。
もし誰でも私がこれをどのように修正できるか教えてください。私はオンラインで複数のものを読んで、チュートリアルをしましたが、私は希望のソリューションに到達することができません。
* {
box-sizing: border-box;
background-color: #bf2e1a;
}
header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
margin-left: 650px;
margin-right: 650px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
div#main-content {
margin-top: 100px;
}
div#disclaimer {
width: 800px;
height: 100px;
height: 500px;
margin: 0 auto;
margin-top: 200px;
background: #EFDFBC;
}
div#get-justice {
position: relative;
top: 30px;
padding-top: 10px;
background-color: #EFDFBC;
margin: 0 auto;
width: 600px;
height: 600px;
}
div#get-justice p {
background-color: #EFDFBC;
color: red;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: red;
border: none;
color: white;
margin-top: 120px;
padding: 20px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
cursor: pointer;
}
h3 {
background: #EFDFBC;
text-align: center;
color: red;
font-size: 23px;
padding-top: 25px;
}
div#first-question {
text-align: center;
}
ul {
columns: 2;
background: #EFDFBC;
\t text-align: -webkit-left;
}
li {
text-align: -webkit-match-parent;
background: #EFDFBC;
display: block;
padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-two-yes {
display: none;
margin: 11px;
}
input#quiz-question-two-no {
display: none;
margin: 11px;
}
label#twoYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-three-yes {
display: none;
margin: 11px;
}
input#quiz-question-three-no {
display: none;
margin: 11px;
}
label#threeYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*label#threeYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
input#quiz-question-four-yes {
display: none;
margin: 11px;
}
input#quiz-question-four-no {
display: none;
margin: 11px;
}
label#fourYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*
label#fourYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
input#quiz-question-five-yes {
display: none;
margin: 11px;
}
input#quiz-question-five-no {
display: none;
margin: 11px;
}
label#fiveYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*
label#fiveYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
.clientinfo{
\t height:445px;
background-color: #EFDFBC;
}
p {
background-color: #EFDFBC;
font-size: 23px;
margin: 0 auto;
padding: 10px 0px 1px 70px;
}
input[type="text"] {
background-color: white;
padding: 4px 0px 0px 10px;
margin: 0px 0px 0px 70px;
}
button {
display: block;
margin: 0 auto;
padding: 25px 35px 20px 25px;
font-size: 35px;
margin-top: 45px;
color: #EFDFBC;
}
button#start {
display: block;
margin: 0 auto;
width: 200px;
padding: 25px 35px 20px 25px;
font-size: 35px;
margin-top: -272px;
margin-right: 68px;
}
hr {
width: 165px;
padding: 1px 0px 0px 0px;
}
div#disclaimer {
width: 800px;
padding: 27px 10px 10px 0px;
}
div#questionOneBody {
background: #EFDFBC;
}
div#questionTwoBody {
background: #EFDFBC;
}
div#questionThreeBody {
background: #EFDFBC;
}
div#questionFourBody {
background: #EFDFBC;
}
div#questionFiveBody {
background: #EFDFBC;
}
h1 {
/* padding: 20px 4px 20px; */
text-align: center;
margin-top: 25px;
}
/*
h1 {
//background: #EFDFBC;
padding: 20px 4px 20px;
text-align: center;
}
*/
h1#disclaimerHeader{
\t background: #EFDFBC;
padding: 20px 4px 20px;
text-align: center;
}
p {
background-color: #EFDFBC;
font-size: 23px;
margin: 0 auto;
padding: 1px 0px 0px 20px;
}
div#disc-container {
width: 450px;
background: #EFDFBC;
padding: 10px 10px 14px 10px;
border-style: solid;
border-color: red;
border-width: 10px;
margin-left: 20px;
}
a#disclaimerLink {
text-decoration: none;
}
/*.hideHeader{
\t display:none;
}*/
p#greenText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: green;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
p#yellowText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: yellow;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
p#redText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: red;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
div#questionHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
/* border-color: #EFDFBC; */
/* top: 153px; */
/* padding-bottom: 30px; */
/* padding-top: 30px; */
margin-top: 163px;
/* margin: 0 auto; */
/* width: 650px; */
/* text-align: center; */
font-size: 28px;
border-width: 10px;
}
.bkr-header{
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 600px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
.visible2 {
display: block;
margin: 0 auto;
width: 650px;
height: 165px;
background: #EFDFBC;
}
.visible4 {
display: block;
margin: 0 auto;
width: 650px;
height: 195px;
background: #EFDFBC;
}
.visibleHeader {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 650px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.page {
\t display: none;
}
.page.active {
display: block;
margin: 0 auto;
width: 650px;
}
.questions {
margin: 0px auto;
width: 650px;
height: 444px;
background: #EFDFBC;
}
.questions-header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 650px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.quiz-questions {
margin-top: 100px;
}<!DOCTYPE html>
<html>
<head>
\t <meta charset = "UTF-8"/>
\t <title>Questions</title>
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class = "quiz-questions">
\t <div id="first-question" class="page active">
\t \t <div id="questionHeader">
\t \t \t <h1> Question 1 </h1>
\t \t </div>
\t \t <div id="questionOneBody">
\t \t \t <h3>First Question</h3>
\t \t \t <ul>
\t \t \t \t <li>a</li>
\t \t \t \t <li>b</li>
\t \t \t </ul>
\t \t \t <hr>
\t \t \t <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" />
\t \t \t <label for="quiz-question-one-yes" id="oneYes">Yes</label>
\t \t \t <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" />
\t \t \t <label for="quiz-question-one-no" id="oneNo">No</label>
\t \t </div>
\t </div> \t
\t <div id="second-question" class="page">
\t \t <div id="questionHeader">
\t \t \t <h1> Question 2 </h1>
\t \t </div>
\t \t <div id="questionTwoBody">
\t \t \t <h3>Second Questions</h3>
\t \t \t <hr>
\t \t \t <input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" />
\t \t \t <label for="quiz-question-two-yes" id="twoYes">Yes</label>
\t \t \t <input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" />
\t \t \t <label for="quiz-question-two-yes" id="twoNo">No</label>
\t \t </div>
\t </div>
\t <div id="third-question" class="page">
\t \t <div id="questionHeader">
\t \t \t <h1> Question 3 </h1>
\t \t </div>
\t \t <div id="questionThreeBody">
\t \t \t <h3>Third Question </h3>
\t \t \t <hr>
\t \t \t <input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" />
\t \t \t <label for="quiz-question-three-yes" id="threeYes">Yes</label>
\t \t \t <input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" />
\t \t \t <label for="quiz-question-three-yes" id="threeNo">No</label>
\t \t </div>
\t </div>
\t <div id="fourth-question" class="page">
\t \t <div id="questionHeader">
\t \t \t <h1> Question 4 </h1>
\t \t </div>
\t \t <div id="questionFourBody">
\t \t \t <h3>some question</h3>
\t \t \t <hr>
\t \t \t <input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" />
\t \t \t <label for="quiz-question-four-yes" id="fourYes">Yes</label>
\t \t \t <input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" />
\t \t \t <label for="quiz-question-four-yes" id="fourNo">No</label>
\t \t </div>
\t </div>
\t <div id="fifth-question" class="page">
\t \t <div id="questionHeader">
\t \t \t <h1> Question 4 </h1>
\t \t </div>
\t \t <div id="questionFiveBody">
\t \t \t <h3>Fourth Question</h3>
\t \t \t <hr>
\t \t \t <input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" />
\t \t \t <label for="quiz-question-five-yes" id="fiveYes">Yes</label>
\t \t \t <input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" />
\t \t \t <label for="quiz-question-five-yes" id="fiveNo">No</label>
\t \t </div>
\t </div> \t
\t <div class="page result">
\t <label>Results</label>
\t <div id="result"></div>
\t </div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
rt.text('All Yes');
} else if (!((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive))) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function() {
$('body').on('click', '[name]', function() {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
\t \t
</script>
だから、あなたが気にすべてがyesまたは最初の質問のないですか？他は関係ありませんか？ –
@SpencerWieczorek：いいえ、「YES NO NO YES NO」と答えた方は、今のところ応答として 'ALL YES'を出力する' mixed response'と言うべきです。 5つの質問がありますが、プログラムはちょうど最初の応答から外れます – Maddy