Jquery 라디오 버튼이 선택된 경우
중복 가능성 :
특정 라디오 버튼 확인이 확인되었습니다.
나는이 2 개의 라디오 버튼이있어 가격에 우송료가 필요한지 여부를 결정할 수 있습니다.
<input type="radio" id="postageyes" name="postage" value="Yes" /> Yes
<input type="radio" id="postageno" name="postage" value="No" /> No
Jquery를 사용하여 'yes'라디오 버튼이 선택되어 있는지 확인하고 그렇다면 '추가'기능을 수행해야합니다. 누군가 내가 어떻게 할 수 있는지 말해 줄 수 있습니까?
도움을 주셔서 감사합니다
편집하다:
내 코드를 이것으로 업데이트했지만 작동하지 않습니다. 내가 뭔가 잘못하고 있습니까?
<script type='text/javascript'>
// <![CDATA[
jQuery(document).ready(function(){
$('input:radio[name="postage"]').change(function(){
if($(this).val() == 'Yes'){
alert("test");
}
});
});
// ]]>
</script>
$('input:radio[name="postage"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// append goes here
}
});
또는 위의-다시-조금 덜 불필요한 jQuery를 사용하십시오.
$('input:radio[name="postage"]').change(
function(){
if (this.checked && this.value == 'Yes') {
// note that, as per comments, the 'changed'
// <input> will *always* be checked, as the change
// event only fires on checking an <input>, not
// on un-checking it.
// append goes here
}
});
수정 된 (개선 된) jQuery :
// defines a div element with the text "You're appendin'!"
// assigns that div to the variable 'appended'
var appended = $('<div />').text("You're appendin'!");
// assigns the 'id' of "appended" to the 'appended' element
appended.id = 'appended';
// 1. selects '<input type="radio" />' elements with the 'name' attribute of 'postage'
// 2. assigns the onChange/onchange event handler
$('input:radio[name="postage"]').change(
function(){
// checks that the clicked radio button is the one of value 'Yes'
// the value of the element is the one that's checked (as noted by @shef in comments)
if ($(this).val() == 'Yes') {
// appends the 'appended' element to the 'body' tag
$(appended).appendTo('body');
}
else {
// if it's the 'No' button removes the 'appended' element.
$(appended).remove();
}
});
var appended = $('<div />').text("You're appendin'!");
appended.id = 'appended';
$('input:radio[name="postage"]').change(function() {
if ($(this).val() == 'Yes') {
$(appended).appendTo('body');
} else {
$(appended).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes
<input type="radio" id="postageno" name="postage" value="No" />No
JS 피들 데모 .
And, further, a mild update (since I was editing to include Snippets as well as the JS Fiddle links), in order to wrap the <input />
elements with <label>
s - allow for clicking the text to update the relevant <input />
- and changing the means of creating the content to append:
var appended = $('<div />', {
'id': 'appended',
'text': 'Appended content'
});
$('input:radio[name="postage"]').change(function() {
if ($(this).val() == 'Yes') {
$(appended).appendTo('body');
} else {
$(appended).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
<input type="radio" id="postageno" name="postage" value="No" />No</label>
Also, if you only need to show content depending on which element is checked by the user, a slight update that will toggle visibility using an explicit show/hide:
// caching a reference to the dependant/conditional content:
var conditionalContent = $('#conditional'),
// caching a reference to the group of inputs, since we're using that
// same group twice:
group = $('input[type=radio][name=postage]');
// binding the change event-handler:
group.change(function() {
// toggling the visibility of the conditionalContent, which will
// be shown if the assessment returns true and hidden otherwise:
conditionalContent.toggle(group.filter(':checked').val() === 'Yes');
// triggering the change event on the group, to appropriately show/hide
// the conditionalContent on page-load/DOM-ready:
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
<input type="radio" id="postageno" name="postage" value="No" />No</label>
<div id="conditional">
<p>This should only show when the 'Yes' radio <input> element is checked.</p>
</div>
And, finally, using just CSS:
/* setting the default of the conditionally-displayed content
to hidden: */
#conditional {
display: none;
}
/* if the #postageyes element is checked then the general sibling of
that element, with the id of 'conditional', will be shown: */
#postageyes:checked ~ #conditional {
display: block;
}
<!-- note that the <input> elements are now not wrapped in the <label> elements,
in order that the #conditional element is a (subsequent) sibling of the radio
<input> elements: -->
<input type="radio" id="postageyes" name="postage" value="Yes" />
<label for="postageyes">Yes</label>
<input type="radio" id="postageno" name="postage" value="No" />
<label for="postageno">No</label>
<div id="conditional">
<p>This should only show when the 'Yes' radio <input> element is checked.</p>
</div>
References:
- CSS:
:checked
selector.- CSS Attribute-selectors.
- General sibling (
~
) combinator.
- jQuery:
Try this
if($("input:radio[name=postage]").is(":checked")){
//Code to append goes here
}
Something like this:
if($('#postageyes').is(':checked')) {
// do stuff
}
$('input:radio[name="postage"]').change(function(){
if($(this).val() === 'Yes'){
// append stuff
}
});
This will listen for a change event on the radio buttons. At the time the user clicks Yes
, the event will fire and you will be able to append anything you like to the DOM.
if($('#test2').is(':checked')) {
$(this).append('stuff');
}
$("input").bind('click', function(e){
if ($(this).val() == 'Yes') {
$("body").append('whatever');
}
});
Try this:
if ( jQuery('#postageyes').is(':checked') ){ ... }
jQuery('input[name="inputName"]:checked').val()
This will listen to the changed event. I have tried the answers from others but those did not work for me and finally, this one worked.
$('input:radio[name="postage"]').change(function(){
if($(this).is(":checked")){
alert("lksdahflk");
}
});
참고URL : https://stackoverflow.com/questions/6654601/jquery-if-radio-button-is-checked
'Programing' 카테고리의 다른 글
TTY를 무시하지 않고 암호를 su / sudo / ssh에 전달하는 방법은 무엇입니까? (0) | 2020.06.21 |
---|---|
Xcode가 하드웨어에서 프로젝트 실행을 갑자기 중단했습니다.“xxx.app을 시작할 수 없습니다 : .. 해당 파일이 없습니다.” (0) | 2020.06.21 |
IN 값 목록으로 주문 (0) | 2020.06.21 |
정규식 일치 배열 만들기 (0) | 2020.06.21 |
그룹당 여러 변수 집계 / 요약 (예 : 합계, 평균) (0) | 2020.06.21 |