当数据来自数据库时，如何一次只选择一个单选按钮并在javascript中取消选择其他单选按钮？答案

【问题标题】：How to select only one radio button at one time and deselect the others in javascript when the data are comes from database?当数据来自数据库时，如何一次只选择一个单选按钮并在javascript中取消选择其他单选按钮？
【发布时间】：2015-01-18 01:03:04
【问题描述】：

可以选择所有单选按钮。但我想允许用户只选择一个单选按钮。

这是 HTML 代码。

$jsqla = mysql_query("select * from products where id='$product_id'") or die(mysql_error());
$jfeta = mysql_fetch_assoc($jsqla);

$formats = explode(";", $jfeta['formats']);

<div class="">
    <?php foreach($formats as $v){ ?>
        <label style="line-height: 1.25em;display: block;width: 100px;margin-right: 10px;float: left;">                         
            <div id="format-id_<?php echo $v?>" style="border: 1px solid;border-radius: 9px;text-align: center;padding-top: 10px;padding-bottom:10px;padding-left: 3px;padding-right: 3px;border-color: #cccccc;font-family: 'SSemibold'; font-size: 13px; color: #44b7da;">                                
                <input type="radio" value="<?php echo $v; ?>" name="abc" style="visibility:hidden;" id="<?php echo $v ?>" onClick="changeColour(this)"/>
                <span style="margin:-17px auto auto 0px;display:block;"><?php echo $v; ?></span>                            
            </div>                      
        </label>
    <?php } ?>      
</div>

这里是 JavaScript 代码。

<script type="text/javascript">
    function changeColour(raid) {
        var raid1 = raid.id;
        document.getElementById("format-id_"+raid1).style.backgroundColor = "#cccccc";
    }                           
</script>

【问题讨论】：

我们没有您的数据库，所以我们无法在 jsfiddle 或类似的工具中测试您的 html 代码。你能提供一个小提琴吗？
只需为所有单选按钮提供相同的名称。
这是因为你所有的单选按钮都在不同的 div 中构造它们在同一个 div 中。
@suchit——在不同的 div 中并不重要，它们没有任何作用。不过，不同的形式确实很重要。
那么您是否要禁用除一个按钮之外的所有按钮？根据什么，身份证？价值？指数？ …?

标签： javascript html

【解决方案1】：

我不确定我是否理解正确，但您可以轻松地在每个单选按钮上执行以下操作。这样只有一个按钮可以被激活。也就是说，如果您使用的是引导程序。

 <input type="radio" data-toggle="button" >

使用工作小提琴：http://jsfiddle.net/8xrhr93g/

【讨论】：

【解决方案2】：

我不知道为什么，但是因为你的 div 而发生这种情况

<div id="format-id" .......>

试试这样的：

 <div>
        <?php for($i=0;$i<10;$i++){ ?>
                    <input type="radio" value="<?php echo $i; ?>" name="abc"  id="<?php echo $i ?>" onClick="javascript:changeColour(this)"/>
                    <span style="margin:-2px auto auto 0px;display:block;"><?php echo $i; ?></span>                            
               <?php } ?>  
    </div>

【讨论】：

在相同或不同的 div 中无关紧要。

【解决方案3】：

$(document).ready(function(e) {
   $(':radio').bind('change',function(){
    var th = $(this), id = th.attr('id'); 
    //alert(th);
   if(th.is(':checked')){
     $(':radio[id="'  + id + '"]').not($(this)).attr('disabled',true);   
   }
   else
   {
      $(':radio[id="'  + id + '"]').not($(this)).attr('disabled',false);  
   }
  });
});

DEMO

【讨论】：

这可能是最最低效的方法。纯 JS 中的等价物是 3 行代码，一个函数调用和several hundred times faster，具体取决于浏览器。

【解决方案4】：

如果我理解您的问题（也许我不理解），您希望用户选择一个单选按钮，然后禁用组中的所有其他单选按钮。如果是这样的话，下面的工作就完成了。

它获取所有具有相同名称的单选按钮并禁用未选中的单选按钮：

function changeColour(raid) {
  var button, buttons = document.getElementsByName(raid.name);

  for (var i=0, iLen=buttons.length; i<iLen; i++) {
    button = buttons[i];

    if (!button.checked) {
      button.disabled = true;
      button.style.backgroundColor = "#cccccc";
    }
  }
}

如果您只想禁用它们，那么：

function changeColour(raid) {
  var buttons = document.getElementsByName(raid.name);

  for (var i=0, iLen=buttons.length; i<iLen; i++) {
    buttons[i].disabled = !buttons[i].checked;
  }
}

【讨论】：