kiểm tra nếu ít nhất một nút radio đã được chọn - JavaScript

Giả sử tôi có HTML hình thức sau đây:kiểm tra nếu ít nhất một nút radio đã được chọn - JavaScript

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Choose</title> 
</head> 

<body> 
    <form method="post" enctype="application/x-www-form-urlencoded"> 
    <h1>Choose</h1> 

    <p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br> 
    <br> 
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br> 
    <br> 
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br> 
    <br> 
    <input type="submit" name="Submit" value="Go"></p> 
    </form> 


</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>

Làm thế nào tôi có thể viết một hàm JavaScript để đảm bảo ít nhất một đầu vào đài phát thanh đã được chọn?

Nguồn

2012-10-25 cybertextron

Tôi nghĩ bạn muốn hộp kiểm không phải là radio ... – elclanrs

Lặp qua các thẻ <input>, kiểm tra loại và nếu nó được chọn.

function isOneChecked() { 
    // All <input> tags... 
    var chx = document.getElementsByTagName('input'); 
    for (var i=0; i<chx.length; i++) { 
    // If you have more than one radio group, also check the name attribute 
    // for the one you want as in && chx[i].name == 'choose' 
    // Return true from the function on first match of a checked item 
    if (chx[i].type == 'radio' && chx[i].checked) { 
     return true; 
    } 
    } 
    // End of the loop, return false 
    return false; 
}

Here it is in action on jsfiddle

Nguồn

2012-10-25 01:27:48

Something như thế này nên làm các trick

if ($("input[type=radio]:checked").length > 0) { 
    // Do your stuff here 
}

CẬP NHẬT Không nhìn thấy rằng nó không phải có jQuery, vì vậy đây là một chức năng thay thế để kiểm tra xem trong tinh khiết JS

function check(){ 
    var radios = document.getElementsByName("choice"); 

    for (var i = 0, len = radios.length; i < len; i++) { 
      if (radios[i].checked) { 
       return true; 
      } 
    } 

    return false; 
}

Nguồn

2012-10-25 01:26:24 pedrochaves

Không có thẻ jQuery nào về câu hỏi này. –

Không có Jquery. – cybertextron

Ops, không thấy điều đó. Xin lỗi =/ – pedrochaves

Vì bạn nói rằng bạn cần biết nếu 'ít nhất một đầu vào được chọn, có thể bạn muốn hộp kiểm chứ không phải là nút radio. (Bạn chỉ có thể chọn một nút radio cùng một lúc từ một nhóm các nút radio có chung một giá trị name.)

Bạn có lẽ nên thả font thẻ và cập nhật HTML của bạn một chút quá:

HTML

<h1>Choose</h1> 
<div> 
    <input type="checkbox" id="ckb-psychology" name="choose" value="psychology"> 
    <label for="ckb-psychology" class="blue">Instant Psychology</label> 
</div> 
<div> 
    <input type="checkbox" id="ckb-geography" name="choose" value="geography"> 
    <label for="ckb-geography" class="red">Instant Geography</label> 
</div> 
<div> 
    <input type="checkbox" id="ckb-gastronomy" name="choose" value="gastronomy"> 
    <label for="ckb-gastronomy" class="purple">Instant Gastronomy</label> 
</div> 
<input type="submit" name="Submit" value="Go">

CSS

label { font-size: 1.5em; } 

.blue { color: #0033CC; } 
.red { color: #CC0000; } 
.purple { color: #660033; }

Javascript

function isOneChecked (name) { 

    var checkboxes = document.getElementsByName(name), 
     i = checkboxes.length - 1; 

    for (; i > -1 ; i--) { 

     if (checkboxes[i].checked) { return true; } 

    } 

    return false; 
}

Nguồn

2012-10-25 02:12:51

Điều này có thể làm mà không cần javascript nếu trình duyệt của bạn nhắm mục tiêu hỗ trợ các thuộc tính HTML5 required.

<input type="radio" name="choose" value="psychology" required> 
<input type="radio" name="choose" value="geography" required> 
<input type="radio" name="choose" value="gastronomy" required>

Lưu ý rằng trong chrome bạn chỉ cần đặt required trên một trong các yếu tố đầu vào. Tôi không chắc chắn những gì các trình duyệt khác làm.

Tôi thường làm điều này ngoài xác thực javascript (như câu trả lời đã chọn) để trình duyệt html 4 cũng được hỗ trợ.

Nguồn

2013-08-27 18:29:45

điều này thật tuyệt vời !!! – suoyong

Tôi đã giải quyết theo cách này.

if(document.querySelector('input[name="choice"]:checked') == null) { 
    window.alert("You need to choose an option!"); 
}

Nguồn

2018-01-02 21:11:48

kiểm tra nếu ít nhất một nút radio đã được chọn - JavaScript

Trả lời

Các vấn đề liên quan