Jquery หากเลือกตัวเลือกนี้


150

ซ้ำได้:
ตรวจสอบปุ่มตัวเลือกเฉพาะ

ฉันมีปุ่มตัวเลือก 2 ปุ่มในขณะนี้เพื่อให้ผู้ใช้สามารถตัดสินใจได้ว่าต้องการไปรษณีย์ที่รวมอยู่ในราคาหรือไม่:

<input type="radio" id="postageyes" name="postage" value="Yes" /> Yes
<input type="radio" id="postageno" name="postage" value="No" /> No

ฉันต้องใช้ Jquery เพื่อตรวจสอบว่ามีการเลือกปุ่มตัวเลือก 'ใช่' หรือไม่และถ้าเป็นเช่นนั้นให้ทำฟังก์ชันต่อท้าย มีคนบอกฉันได้ไหมว่าฉันจะทำอย่างนี้ได้ไหม

ขอบคุณสำหรับความช่วยเหลือใด ๆ

แก้ไข:

ฉันได้อัปเดตโค้ดเป็นสิ่งนี้แล้ว แต่มันไม่ทำงาน ฉันกำลังทำอะไรผิดหรือเปล่า?

<script type='text/javascript'>
// <![CDATA[
jQuery(document).ready(function(){

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

});

// ]]>
</script>

1
@Daniel H: ในการอัปเดตของคุณ: มันใช้งานได้ดี !
Shef

แปลกมากมันไม่ทำงานบนเว็บไซต์ของฉัน อย่างน้อยฉันก็รู้ว่ารหัสนั้นถูกต้องฉันจะพยายามค้นหาว่ามีอะไรผิดปกติขอบคุณสำหรับคำตอบทั้งหมด!
Daniel H

คำตอบ:


285
$('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();
        }
    });

สาธิต JS ซอ

และยิ่งไปกว่านั้นมีการอัปเดตเล็กน้อย (ตั้งแต่ฉันแก้ไขเพื่อรวมส่วนย่อยรวมถึงลิงก์ 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>

สาธิต JS ซอ

นอกจากนี้หากคุณต้องการแสดงเนื้อหาโดยขึ้นอยู่กับองค์ประกอบที่ผู้ใช้ตรวจสอบการอัปเดตเล็กน้อยที่จะสลับการแสดงผลโดยใช้การแสดง / ซ่อนอย่างชัดเจน:

// 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 ซอ

อ้างอิง:


3
ไม่จำเป็นต้องดูว่ามีการตรวจสอบหรือไม่ มันจะไม่มีค่าเป็นอย่างอื่น สิ้นเปลืองทรัพยากร!
Shef


12

บางสิ่งเช่นนี้

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

3
วัตถุ jQuery เป็นจริงเสมอ คุณอาจต้องการใช้$(...).lengthแทน
pimvdb

คุณหมายถึง#postageyes:checkedหรือ$('#postageyes').is(':checked')?
Shef

@pimvdb ตามเอกสาร jQuery ให้is()ส่งคืนบูลีน ดังนั้นการโทร.length()เสีย จากเอกสาร: "แตกต่างจากวิธีการกรองอื่น ๆ . is () ไม่ได้สร้างวัตถุ jQuery ใหม่ แต่จะช่วยให้คุณสามารถทดสอบเนื้อหาของวัตถุ jQuery โดยไม่ต้องดัดแปลง" - api.jquery.com/is
Asaph

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

สิ่งนี้จะฟังเหตุการณ์การเปลี่ยนแปลงที่ปุ่มตัวเลือก ในขณะที่ผู้ใช้คลิกYesเหตุการณ์จะเริ่มขึ้นและคุณจะสามารถผนวกสิ่งที่คุณต้องการใน DOM



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

ไม่แน่ใจเกี่ยวกับสิ่งนี้ แต่จะไม่$("#postageyes:checked"กลับมาจริงหรือ? คุณไม่ต้องใช้.lengthมันในการทำงานหรือ
Phil

ลบ "หรือ" และทุกอย่างหลังจากนั้น
แหล่งกำเนิด


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

ในขณะที่ข้อมูลโค้ดนี้อาจแก้ไขคำถามรวมถึงคำอธิบายช่วยปรับปรุงคุณภาพของโพสต์ของคุณ จำไว้ว่าคุณกำลังตอบคำถามสำหรับผู้อ่านในอนาคตและคนเหล่านั้นอาจไม่ทราบสาเหตุของการแนะนำรหัสของคุณ
Patrick Hund

เข้าใจแล้ว คำตอบถัดไปจะมี
Benjamin

0

นี่จะฟังเหตุการณ์ที่เปลี่ยนไป ฉันได้ลองคำตอบจากคนอื่น ๆ แต่สิ่งเหล่านั้นไม่ได้ผลสำหรับฉันและในที่สุดก็ใช้งานได้

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.