2009-03-18 4 views
33

라디오 버튼과 레이블을 연결하고, 나는 간단한 라디오 버튼 설정이있어 :어떻게 MVC를 사용하고

<%=Html.RadioButton("my_flag", True)%><label>Yes</label> 
<%=Html.RadioButton("my_flag", False)%><label>No</label> 

내가 부족 유일한 것은 당신이 레이블을 클릭 할 수 없다는 것입니다을 라디오 버튼을 선택하십시오. 일반적으로 다음을 사용하십시오.

<label for="my_flag"> 

두 레이블을 마지막 라디오 버튼과 연결합니다. 레이블을 올바른 라디오 버튼과 연결하는 방법이 있습니까?

참고 : 이것은 종이 양식을 모방 한 것이므로 확인란으로 전환하는 것은 옵션이 아닙니다.

+0

답변을 수락해도 주어진 답안의 예처럼 ID를 재정의해야합니다.이 작업을 수행하지 않으면 ID가 동일한 두 요소가 존재하므로 HTML 유효성 검사가 실패합니다. –

+0

http://stackoverflow.com/questions/8320172/use-html-radiobuttonfor-and-html-labelfor-for-the-same-model-but-different-value – JohnLBevan

답변

31

당신은 (그들은 같은 그룹에있을 수 있도록) 두 개의 라디오 버튼에 동일한 이름을 제공해야하지만 다른 IDS (개별적으로 각각 하나의 레이블을 연결할 수 있도록). ASP.NET MVC에 익숙하지 않아 실제로 어떻게 수행해야할지 모르지만 솔루션입니다.

편집 : 두 번째 가능성은과 같이, 라벨 태그 안에 라디오 버튼을 래핑하는 것입니다 :

<label><%=Html.RadioButton("my_flag", True)%>Yes</label> 
<label><%=Html.RadioButton("my_flag", False)%>No</label> 

* 실제로 더 나은 브라우저 호환성을 가질 수있다 이런 식으로, 나는 일부 브라우저는 여전히 불확실 알고 있습니다 내가 뭔가를 말해주지 경우 이름/ID를 구분

+1

이 솔루션은 id가 dublicated 인 잘못된 html을 생성합니다. –

+0

아주 좋습니다. 앞서 말했듯이, ASP.NET MVC에 대해서는 아무것도 모릅니다. 첫 번째 인수가 id 또는 name 특성을 정의하는지 여부는 알 수 없습니다. –

+0

id와 name을 모두 정의합니다. –

14

에 대해 나는, 정말 미안을하는 ASP 프로그래머가 아니에요 : P 입력의 ID로 참조에 대한

라벨의 속성. 그래서 당신은 뭔가를해야 할 것입니다

<input type="radio" name="rad1" id="rad1_1"><label for="rad1_1">Rad1</label> 
<input type="radio" name="rad1" id="rad1_2"><label for="rad1_2">Rad2</label> 
39

당신은 이것을 구현하는 두 가지 방법이 있습니다.

첫번째 해결책은 <label/> 태그 안에 라디오 버튼을 삽입하는 것입니다.

<p> 
    <label><%=Html.RadioButton("option", "yes") %> Yes</label> 
</p> 

<p> 
    <label><%=Html.RadioButton("option", "no") %> No</label> 
</p> 

두 번째 경로는 각 라디오 버튼을 ID와 연관시키는 것입니다. 이것은 또한 htmlAttributes 인수를 매우 간단하며 양식 레이아웃에 관하여 더 많은 유연성을 허용 : 나는 후자를 추천 할 것입니다

<p> 
    <label for="option_yes">Yes:</label> 
    <%=Html.RadioButton("option", "yes", new { id = "option_yes" }) %> 
</p> 

<p> 
    <label for="option_no">Np:</label> 
    <%=Html.RadioButton("option", "no", new { id = "option_no" }) %> 
</p> 

, 그것을 당신이 너무 요구하는 하나가 될 것으로 보인다. 당신은 ID와 인수를 제공해야합니다 사실

편집

상관없이 속성이 없습니다. 이렇게하지 않으면 사이트에 동일한 ID를 가진 여러 요소가 생기며 HTML 유효성 검사가 실패합니다. (이 면도기를 사용하고 있지만, 번역 쉽다.)

@Html.RadioButtonFor(model => model.MyValue, true, new { id = "MyValue_True" }) 
<label for="MyValue_True">Yes, this is true</label> 

@Html.RadioButtonFor(model => model.MyValue, false, new { id = "MyValue_False" }) 
<label for="MyValue_False">No, this is false</label> 

는 기본적으로 수동으로 라디오 버튼의 id 속성을 지정 :

+0

+1 I 첫 번째 방법을 좋아했습니다. 각 라디오 버튼에 ID를 지정할 필요가 없습니다. 하지만이 크로스 브라우저 호환 .. ?? – shashwat

5

당신은 이런 식으로 할 수 있습니다.

관련 문제