Jquery 如果选中单选按钮[重复]

Answer 1

$('input:radio[name="postage"]').change(
    function(){
        if ($(this).is(':checked') && $(this).val() == 'Yes') {
            // append goes here
        }
    });

或者，上面的 - 再次 - 使用一点less多余的 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 演示.

此外，还有一个温和的更新（因为我正在编辑以包含片段以及 JS Fiddle 链接），以便用

<input />

包裹

<label>

元素 - 允许单击文本来更新相关

 <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>

JS Fiddle 演示.

此外，如果您只需要根据用户检查的元素来显示内容，则可以进行轻微更新，使用显式显示/隐藏来切换可见性：

// 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 &lt;input&gt; 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 &lt;input&gt; element is checked.</p>
</div>

JS Fiddle 演示.

参考资料：

• CSS：

  • :checked

    选择器。
  • CSS 属性选择器。
  • 一般兄弟（

    ~

    ）组合器。
• jQuery：

  • appendTo()

    。
  • 属性等于选择器。

  • change()

    。

  • :checked

    选择器。

  • filter()

    。

  • is()

    。

  • :radio

    选择器。

  • remove()

    .

  • text()

    .

  • toggle()

    .

  • val()

    .

Answer 2

试试这个

if($("input:radio[name=postage]").is(":checked")){
  //Code to append goes here
}

Answer 3

类似这样的：

if($('#postageyes').is(':checked')) {
// do stuff
}

Answer 4

if($('#test2').is(':checked')) {
    $(this).append('stuff');
} 

Answer 5

$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

这将侦听单选按钮上的更改事件。当用户单击

Yes

时，该事件将触发，您将能够将您喜欢的任何内容附加到 DOM。

Answer 6

$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});

Answer 7

试试这个：

if ( jQuery('#postageyes').is(':checked') ){ ... }

Answer 8

这将监听更改的事件。我尝试过其他人的答案，但那些对我不起作用，最后，这个起作用了。

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});

Answer 9

另一种实现可能是这个：

HTML

<h1>Display Radio Buttons</h1>
<form action="/action_page.php">
  <p>Please select your favorite Web language:</p>
  <!-- 1 -->
  <input type="radio" id="html" name="fav_language" value="HTML" checked>
  <label for="html">HTML</label><br>

  <!-- 2 -->
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>

  <!-- 3 -->
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <br>
  <input type="submit" value="Submit">
</form>

记住：

• name

  ：对单选按钮进行分组。

• id

  ：告诉每个单选按钮的状态。

• value

  ：这就是您将在提交时发布的内容。

• for

  ：允许您将给定标签关联到名为 id 的输入字段。
• 提交按钮：将所选单选按钮值 POST 到 Web 服务器（后端）。

jQuery

记住这是代码前端。

在这里，您可以通过

type

选择所有按钮，然后根据您的选择进行任何操作。在本例中，我们将使用 HTML 元素的

value

部分：

$("[type='radio']").on('change', function (e) {
  var selectedValue = $(this).val();
  console.log(selectedValue); // So you can see it in the console.
  if (selectedValue == 'HTML') {
    // Do something.
  }
  else {
    // Or do something else.
    // Example:
    // someOtherSelectedElement.prop("disabled", false);
  }
});

向单选按钮添加尽可能多的

if

语句。

请记住，由于使用

value

字段，您可以设置任意数量的选项。

结果

实时代码

参考文献

• W3Schools 中的 HTML

Answer 10

jQuery('input[name="inputName"]:checked').val()