Jquery, если установлен переключатель
Возможные Дубликаты:
проверка конкретного переключателя проверяется
у меня есть эти 2 переключателя на данный момент, так что пользователь может решить, нужно ли им почтовые расходы включены в цену или нет:
<input type="radio" id="postageyes" name="postage" value="Yes" /> Yes
<input type="radio" id="postageno" name="postage" value="No" /> No
мне нужно использовать Jquery, чтобы проверить, установлен ли переключатель "да", и если это так, выполните функцию добавления. Может кто-нибудь сказать мне, как я это сделаю, пожалуйста?
Спасибо за любую помогите
edit:
я обновил свой код до этого, но он не работает. Я делаю что-то не так?
<script type='text/javascript'>
// <![CDATA[
jQuery(document).ready(function(){
$('input:radio[name="postage"]').change(function(){
if($(this).val() == 'Yes'){
alert("test");
}
});
});
// ]]>
</script>
9 ответов:
$('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 Fiddle), чтобы обернуть
<input />
С ЭЛЕМЕНТАМИ<label>
s-разрешить щелчок по тексту для обновления уместно<input />
- и изменение средств создания контента для добавления: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>
кроме того, если вам нужно только показать содержимое в зависимости от того, какой элемент проверяется пользователем, небольшое обновление, которое будет переключать видимость с помощью явного 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>
и, наконец, используя только 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>
ссылки:
- CSS:
:checked
селектор.- атрибут-селекторы CSS.
- общие одноуровневый (
~
) комбинатор.- jQuery:
$('input:radio[name="postage"]').change(function(){ if($(this).val() === 'Yes'){ // append stuff } });
это будет прослушивать событие изменения на переключателях. В момент нажатия пользователем кнопки
Yes
, событие будет срабатывать, и вы сможете добавить все, что вам нравится в DOM.