텍스트를 클릭하여 해당 라디오 버튼 선택
PHP를 사용하여 퀴즈 웹 응용 프로그램을 만들고 있습니다. 각 질문은 별도의 질문으로 구성 되며 사용자가 자신의 답변을 선택할 수 있도록하는 데 <label>사용 radio buttons되는 4 가지 선택 항목이 있습니다. 단일 질문에 대한 현재 HTML은 다음과 같습니다.
<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>
사용자 가 라디오 버튼과 관련된 텍스트를 클릭 할 수있는 옵션을 제공하고 싶습니다 . 현재 사용자는 라디오 버튼 자체 만 클릭 할 수 있습니다.이 작업은 상당히 번거로운 작업입니다.
선택 텍스트를 클릭하여 특정 라디오 버튼 선택을 선택할 수 없음을 읽었으며 , 태그 의 for및 id속성이 일치하도록 하는 제안 사항이 표시 됩니다. 이 작업을 수행했지만 여전히 작동하지 않습니다.
내 질문은 : 라디오 버튼 자체 만 선택할 수있는 것이 아니라 개체 의 텍스트를 클릭 <input type="radio">할 수 있기를 바랍니다. 나는 전에 이것에 대해 읽었지만 내 문제에 대한 해결책을 찾지 못하는 것 같습니다. 어떤 도움이나 제안이라도 대단히 감사합니다!
코드에서 양식 자체에 레이블이 있습니다. 아래와 같이 각 개별 라디오 그룹에 레이블을 지정하려고합니다.
<form>
<p>What is my middle name?</p>
<br>
<input id="349" type="radio" value="1" name="question1">
<label for="349">Abe</label>
<br>
<input id="350" type="radio" value="2" name="question1">
<label for="350">Andrew</label>
<br>
<input id="351" type="radio" value="3" name="question1">
<label for="351">Andre</label>
<br>
<input id="352" type="radio" value="4" name="question1">
<label for="352">Anderson</label>
<br>
</form>두 요소가 동일한 ID를 가져서는 안된다는 점에 유의해야합니다. 이 name속성은 라디오 버튼이 그룹으로 작동하고 한 번에 하나의 선택 만 허용하도록 사용됩니다.
Nathan 의 대답 에 따라 완료되면 라디오 버튼과 레이블 사이에 클릭 할 수없는 약간의 공간이있는 것 같습니다 . 매끄럽게 결합하는 방법은 다음과 같습니다 ( 이 도움말 참조 ).
<form>
<p>What is my middle name?</p>
<br>
<label><input id="349" type="radio" value="1" name="question1">Abe</label>
<br>
<label><input id="350" type="radio" value="2" name="question1">Andrew</label>
<br>
<label><input id="351" type="radio" value="3" name="question1">Andre</label>
<br>
<label><input id="352" type="radio" value="4" name="question1">Anderson</label>
<br>
</form>
라벨 태그는 각 답변 주변에 있어야합니다 (예 : Abe, Andrew 등). 각 답변에 대해 고유해야합니다.
라벨 태그 내에 입력 태그를 중첩하면 라벨이 라디오 버튼 바로 옆에 표시됩니다. 이전에 제안 된 접근 방식을 사용하면 html 파일 내의 아무 곳에 나 레이블 태그를 넣을 수 있으며 클릭하면 관련 라디오 버튼이 선택됩니다. 이것 좀 봐:
<html>
<body>
<form>
<p>What is my middle name?</p>
<br>
<input id="349" type="radio" value="1" name="question1">
<br>
<input id="350" type="radio" value="2" name="question1">
<label for="350">Andrew</label>
<br>
<input id="351" type="radio" value="3" name="question1">
<br>
<input id="352" type="radio" value="4" name="question1">
<label for="352">Anderson</label>
<br>
</form><br/>
<p>This is a paragraph</p>
<label for="349">Abe</label><br/>
<label for="351">Andre</label>
</body>
</html>대신 이렇게하면이 결함이 제거됩니다.
<form>
<p>What is my middle name?</p>
<br>
<label>
<input id="349" type="radio" value="1" name="question1"/>Abe
</label>
<br>
<label>
<input id="350" type="radio" value="2" name="question1"/>Andrew
</label>
<br>
<label>
<input id="351" type="radio" value="3" name="question1"/>Andre
</label>
<br>
<label>
<input id="352" type="radio" value="4" name="question1"/>Anderson
</label>
<br>
</form>이렇게 할 수 있습니다
<label for="1">hi</label>
<input type="radio" id="1" />
따라서 텍스트 또는 레이블을 클릭하면 라디오 버튼이 선택됩니다. 하지만 이렇게하면 ...
<label for="1">//</label>
and you add this to what the code I wrote just before this then if you click on the 2nd label then it will also select the radio.
I have been doing this for years, but neither of these work for me, using variables.
echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
<label for='$studentID'>$fname</label> $lname<br />\n";
echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
<label for='$studentID'>$fname $lname</label><br />\n";
and here is the source:
<input type='radio' name='student' id='986875' value='986875'>
<label for='986875'>John</label> Brown<br />
참고URL : https://stackoverflow.com/questions/7863251/clicking-the-text-to-select-corresponding-radio-button
'code' 카테고리의 다른 글
| SQL 오류 errno : 121 (0) | 2020.10.09 |
|---|---|
| C에서 텍스트 파일을 읽고 모든 문자열을 인쇄하는 방법 (0) | 2020.10.09 |
| Scala 컴파일에서 java.lang.OutOfMemoryError : PermGen 공간을 방지하는 방법은 무엇입니까? (0) | 2020.10.09 |
| ListViewItem은 ListView의 너비로 늘어나지 않습니다. (0) | 2020.10.09 |
| CouchDB에서 트랜잭션과 잠금을 할 수 있습니까? (0) | 2020.10.09 |