jQuery/JavaScript - Ẩn/Hiện hộp thả xuống đang chờ xử lý trên Nút Radio

Question

Tôi muốn làm cho nó thả xuống chỉ hiển thị khi nút radio (tùy chọn 3) được nhấp và ẩn nó nếu 1 hoặc 2 đã được chọn. Điều gì sẽ là cách tốt nhất để hoàn thành điều này? Tôi có một chút kinh nghiệm với JavaScript và mỏng để không có jQuery nhưng nó có vẻ như nó có thể là con đường để đi.

Nhờ sự giúp đỡ, Dan

Đây là mã HTML Tôi có như bây giờ:

<p class="help">Selection:</p> 

<div id='buttons'> 
    <label><input type="radio" name="select" /> Option 1 </label> 
    <label><input type="radio" name="select" /> Option 2</label> 
    <label><input type="radio" name="select" /> Option 3</label> 
</div> 
<div id="list" style="display: none;"> 
    <label>Please Select From the List: 
    <select> 
     <option>True</option> 
     <option>False</option> 
    </select> 
    </label> 
</div> 

Answer 1

$(document).ready(function(){ 
    $("[name=select]").change(function(){ // Whenever the radio buttons change 
    $("#list").toggle($("[name=select]").index(this)===2); // Only keep the list open when it's the last option (First option = 0, Third option = 2) 
    }); 
}); 

code in action này.

Answer 2

Giả sử bạn đang sử dụng jquery, vì nó có vẻ như nó từ câu hỏi của bạn, bạn có thể sửa đổi HTML của bạn như sau:

<p class="help">Selection:</p> 
    <div id='buttons'> 
     <label><input type="radio" name="select" id="option1" /> Option 1 </label> 
     <label><input type="radio" name="select" id="option2" /> Option 2</label> 
     <label><input type="radio" name="select" id="option3" /> Option 3</label> 
    </div> 
    <div id="list"> 
     <label>Please Select From the List: 
      <select id="mySelect"> 
       <option>True</option> 
       <option>False</option> 
      </select> 
     </label> 
    </div>​ 
</p> 

Sau đó, bạn có thể viết một số jquery như vậy:

$(document).ready(
    function() 
    { 
     $("#option1, #option2, #option3").click(
      function() 
      { 
       if (this.id == "option3") 
        $("#mySelect").hide(); 
       else 
        $("#mySelect").show(); 
      }); 
    });​ 

Bạn có thể nhìn thấy nó làm việc ở đây: http://jsfiddle.net/AVFuY/3/

EDIT: Tôi loại bỏ các lớp không cần thiết và chỉ được sử dụng của id để không nhầm lẫn và thêm mã không cần thiết.

Answer 3

<label><input type="radio" name="select" onclick="document.getElementById('list').style.display=this.checked?'':'none'" /> Option 3</label> 

Answer 4

Vì đây là một câu hỏi khá cơ bản, tôi nghĩ rằng đó sẽ là hướng dẫn để hướng dẫn bạn qua tài liệu jQuery trong khi tôi trả lời câu hỏi của bạn. Nếu bạn thực sự không biết gì về jQuery, tôi khuyên bạn nên làm theo hướng dẫn ngắn này trước tiên - nó sẽ làm mọi thứ dễ dàng hơn nhiều cho bạn trong tương lai: jQuery Documentation - Getting Started With jQuery

Yêu cầu của bạn là điều gì đó xảy ra (trong trường hợp này, một phần tử khác là ẩn/hiển thị) khi chúng ta nhấp vào nút radio. Có hai phần của vấn đề này: đầu tiên, chúng ta cần phải tìm các nút radio, sau đó chúng ta cần phải làm một cái gì đó xảy ra khi chúng ta nhấp vào nó.

1. Tìm các nút radio

Hãy xem tài liệu Selector jQuery đây: http://api.jquery.com/category/selectors/

Như bạn thấy, có một giả selector cụ thể cho nút radio ": radio" . Chúng tôi muốn chọn tất cả mọi thứ bên trong của phần tử với ID "nút", do đó đây là cách chọn sẽ xem xét trong tổng số:

$("#buttons input:radio"); 

Bằng cách này, nó được gọi là một "pseudo-selector" bởi vì nó lọc các mặt hàng chúng tôi đã được chọn (trong trường hợp này, thẻ đầu vào bên trong của một div với id "nút"). Bộ chọn giả luôn bắt đầu bằng dấu ":".

2. Làm điều gì đó xảy ra khi chúng ta nhấp vào chúng

Consult Sự kiện jQuery tham khảo ở đây: http://api.jquery.com/category/events/

Chúng tôi muốn ".click()" sự kiện ở đây, rõ ràng.Một khi chúng ta đã chọn các yếu tố của chúng tôi, chúng tôi có thể áp dụng một handler nhấp chuột để họ như thế này:

$("#buttons input:radio").click(function() { 
    // make something happen here 
    alert("input button clicked: " + $(this).index()); 
}); 

Lưu ý rằng điều này sẽ áp dụng xử lý cùng một nhấp chuột để cả ba nút đầu vào, nhưng bạn có thể truy cập vào các yếu tố cụ thể đã được nhấp qua từ khóa "này". Bao bọc $() xung quanh nó làm cho nó thành một lựa chọn jQuery hơn là chỉ là một đối tượng Javascript và cho phép chúng ta gọi các hàm jQuery trên nó.

3. Ẩn và hiển thị các yếu tố danh sách có điều kiện

Hãy mở rộng đoạn mã trên để thực sự ẩn và hiển thị mà div khác, tùy thuộc vào mục được nhấp. Chúng tôi sẽ tham khảo tài liệu Hiệu ứng jQuery để chúng tôi có thể ẩn và hiển thị nó thú vị: http://api.jquery.com/category/effects/

Các chức năng chúng tôi sẽ sử dụng là ".slideUp()", ẩn phần tử và ". slideDown() ", hiển thị nó. Chúng tôi cũng sẽ sử dụng hàm ".index()" mà tôi đã sử dụng trong ví dụ trước để tìm ra nút nào đã được nhấp, mặc dù tôi khuyên bạn nên cung cấp cho nút một ID duy nhất trong tương lai để mã của bạn không phụ thuộc vào thứ tự của các nút. Dưới đây là đoạn code cuối cùng:

$("#buttons input:radio").click(function() { 
    // if it was the third button (0-indexed, so the 3rd one is index 2)... 
    if ($(this).index() == 2) { 
     // display the element with ID "list" 
     $("#list").slideDown(); 
    } 
    else { 
     // hide the element with ID "list" 
     $("#list").slideUp(); 
    } 
}); 

Xin lỗi vì chiều dài của câu trả lời này, nhưng hy vọng đó là thuận lợi hơn để hiểu biết của bạn jQuery hơn "sao chép và dán 3 dòng giải pháp siêu nhỏ gọn này".

Answer 5

Nếu không có thay đổi đánh dấu của bạn:

$(function() 
{ 
    $("#list").hide(); 
    $("#buttons input:radio[name=select]").click(function() 
    { 
     var myindex = $("#buttons input:radio[name=select]").index(this); 
     if (myindex == 2) 
     { 
     $("#list").show(); 
     } 
     else 
     { 
     $("#list").hide(); 
     }; 
    }); 
}); 

EDIT: Một lựa chọn khác: chỉ hiển thị nó vào nút cuối cùng trong danh sách.

$(function() 
{ 
    $("#list").hide(); 
    $("#buttons input:radio[name=select]").click(function() 
    { 
     var myindex = $("#buttons input:radio[name=select]").index(this); 
     var lastone = $("#buttons input:radio[name=select]:last").index("#buttons input:radio[name=select]"); 
     if (myindex == lastone) 
     { 
     $("#list").show(); 
     } 
     else 
     { 
     $("#list").hide(); 
     }; 
    }); 
});