Hướng dẫn javascript allow only one checkbox checked - javascript chỉ cho phép một hộp kiểm được chọn

Tôi có 15 hộp kiểm trong một hình thức. Hộp kiểm này độc lập với nhau. Tôi muốn một chức năng JavaScript tạo ra, khi người dùng đang chọn 2 hộp kiểm, hộp kiểm tra đầu tiên không được kiểm soát và lần thứ hai được kiểm tra.

hỏi ngày 17 tháng 7 năm 2011 lúc 13:23Jul 17, 2011 at 13:23

Florin FrĂticĂflorin FrĂFlorin Frătică

5774 Huy hiệu vàng7 Huy hiệu bạc13 Huy hiệu đồng4 gold badges7 silver badges13 bronze badges

4

Bạn sẽ tốt hơn khi sử dụng các nút radio thay vì các hộp kiểm theo trang web này: http://www.echoecho.com/htmlforms10.htm?

Nếu bạn muốn sử dụng các hộp kiểm, tôi đoán bạn có thể làm điều gì đó như thế này:

Mã HTML:

 Option 1
 Option 2
 Option 3
 Option 4

Mã JavaScript:

function selectOnlyThis(id) {
    for (var i = 1;i <= 4; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    document.getElementById(id).checked = true;
}

Đã trả lời ngày 17 tháng 7 năm 2011 lúc 13:31Jul 17, 2011 at 13:31

2

Kiểm tra fiddle

1. Đặt tên của các hộp kiểm của bạn LET 'MyCheckBox'.
2. Khi nhấp vào vòng kiểm tra vòng thông qua tất cả các hộp kiểm có tên 'MyCheckBox';
3. Tạo 'MyCheckBox'

   function selectOnlyThis(id) {
       for (var i = 1;i <= 4; i++)
       {
           document.getElementById("Check" + i).checked = false;
       }
       document.getElementById(id).checked = true;
   }
   

   4.
4. Thực hiện hộp kiểm nhấp chuột

   function selectOnlyThis(id) {
       for (var i = 1;i <= 4; i++)
       {
           document.getElementById("Check" + i).checked = false;
       }
       document.getElementById(id).checked = true;
   }
   

   5.

HTML

JavaScript

function selectOnlyThis(id){
  var myCheckbox = document.getElementsByName("myCheckbox");
  Array.prototype.forEach.call(myCheckbox,function(el){
    el.checked = false;
  });
  id.checked = true;
}

Đã trả lời ngày 9 tháng 9 năm 2016 lúc 6:23Sep 9, 2016 at 6:23

NisarnisarNisar

5.45016 Huy hiệu vàng66 Huy hiệu bạc82 Huy hiệu Đồng16 gold badges66 silver badges82 bronze badges

0

Tôi đã tạo ra codepen này từ câu trả lời của John, nhưng tôi đã thêm khả năng bỏ chọn tất cả các hộp kiểm.

HTML:

  

    

  
     Option 1
  

    

  
     Option 2
  


  
   Option 3
  


  
   Option 4
  

JavaScript:

function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++){
    if ("Check" + i === id && document.getElementById("Check" + i).checked === true){
            document.getElementById("Check" + i).checked = true;
            } else {
              document.getElementById("Check" + i).checked = false;
            }
    }  
}

https://codepen.io/thomasweld/pen/Pmaega?editors=1010

Đã trả lời ngày 15 tháng 5 năm 2017 lúc 15:39May 15, 2017 at 15:39

Tín dụng cho: http://forums.devshed.com/html-programing-1/make-checkboxes-exclusive-55312.html

Đã trả lời ngày 17 tháng 7 năm 2011 lúc 13:27Jul 17, 2011 at 13:27

DarlinDondarlintondarlinton

2.13116 Huy hiệu bạc21 Huy hiệu đồng16 silver badges21 bronze badges

1

Điều này có thể được kiểm tra như thế này ...

Đã trả lời ngày 17 tháng 7 năm 2011 lúc 13:46Jul 17, 2011 at 13:46

Sẽ dễ dàng hơn nhiều khi sử dụng các nút radio hơn là hộp kiểm. Bằng cách đó, bạn chỉ có thể chọn một tùy chọn tại một thời điểm, đó là những gì bạn muốn thực sự.

Đã trả lời ngày 17 tháng 7 năm 2011 lúc 14:58Jul 17, 2011 at 14:58

Có thể kiểm tra như thế này:

Tại JavaScript:

function call(no, value) {
    if(no== 0){
        document.frmMTR.check2.checked = false
        document.frmMTR.check3.checked = false;     
    }
    else if(no== 1){
        document.frmMTR.check1.checked = false
        document.frmMTR.check3.checked = false; 
    }
    else if(no== 2){
        document.frmMTR.check1.checked = false
        document.frmMTR.check2.checked = false; 
    }
}

Tại HTML:

function selectOnlyThis(id) {
    for (var i = 1;i <= 4; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    document.getElementById(id).checked = true;
}

Đã trả lời ngày 14 tháng 1 năm 2015 lúc 6:27Jan 14, 2015 at 6:27

IanianIan

3811 Huy hiệu bạc17 Huy hiệu đồng1 silver badge17 bronze badges

Thay vào đó, những gì bạn có thể làm là sử dụng radio loại đầu vào và đặt một tên chung cho tất cả chúng. Nếu bạn cố gắng kiểm tra người khác, nó sẽ tự động bỏ chọn cái đầu tiên.

function selectOnlyThis(id) {
    for (var i = 1;i <= 4; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    document.getElementById(id).checked = true;
}

Ít nhất điều này đơn giản hơn

Đã trả lời ngày 16 tháng 1 năm 2018 lúc 5:25Jan 16, 2018 at 5:25

Bằng cách này, bạn sẽ chỉ có một hộp đã kiểm tra và bạn có thể bỏ chọn hộp đã kiểm tra đó.

HTML

function selectOnlyThis(id) {
    for (var i = 1;i <= 4; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    document.getElementById(id).checked = true;
}

JavaScript

function selectOnlyThis(id) {
    for (var i = 1;i <= 4; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    document.getElementById(id).checked = true;
}

Đã trả lời ngày 9 tháng 9 năm 2016 lúc 6:23May 25, 2021 at 15:06