单选按钮选择只有一个“YES”和一个“否”的一组

我试图创建类似的东西，这选项一组，所以不会是行或列中有两个选择单选按钮选择只有一个“YES”和一个“否”的一组

我试图创建一个基本的HTML分组：

<div id="main1"> 
      <div id="group1"> 
       <input type="radio" name="group1" class="group1" value="test1"> 
       <input type="radio" name="group1" class="group1" value="test2"> Group 1 
      </div> 
      <div id="group2"> 
       <input type="radio" name="group2" class="group2" value="test1"> 
       <input type="radio" name="group2" class="group2" value="test2"> Group 2 
      </div> 
      <div id="group3"> 
       <input type="radio" name="group3" class="group3" value="test1"> 
       <input type="radio" name="group3" class="group3" value="test2"> Group 3 
      </div> 
      <div id="group4"> 
       <input type="radio" name="group4" class="group4" value="test1"> 
       <input type="radio" name="group4" class="group4" value="test2"> Group 4 
      </div> 
     </div>

乙但我仍然不知道Javascript/jQuery代码应该如何。如果您对HTML结构有更好的建议，也请提出建议。这项调查的信息应该被上传到数据库中。

来源

2016-07-26 Muhammad

试试这个

HTML - >

<div id="main1"> 
    <div id="group1"> 
    <input type="radio" name="group1" class="team1" value="test1"> 
    <input type="radio" name="group1" class="team2" value="test2"> Group 1 
    </div> 
    <div id="group2"> 
    <input type="radio" name="group2" class="team1" value="test1"> 
    <input type="radio" name="group2" class="team2" value="test2"> Group 2 
    </div> 
    <div id="group3"> 
    <input type="radio" name="group3" class="team1" value="test1"> 
    <input type="radio" name="group3" class="team2" value="test2"> Group 3 
    </div> 
    <div id="group4"> 
    <input type="radio" name="group4" class="team1" value="test1"> 
    <input type="radio" name="group4" class="team2" value="test2"> Group 4 
    </div> 
</div>

的JavaScript - >

$("input:radio").change(function(){ 
var group = ":radio[name='"+ $(this).attr("name") + "']"; 
    if ($(this).is(':checked')) { 
    $("input:radio[class^='"+ $(this).attr('class')+"']").each(function(i) { 
     this.checked = false; 
    }); 
    $(this).prop('checked', 'checked'); 
    } 
});

这个工作对我罚款...

来源

2016-07-26 06:27:27

不是为我工作：https://jsfiddle.net/L1qmLLqp/ – mxlse

'$（本）.prop（' 检查 ' '检查'）;'尝试添加此。它会很好地工作 –

这将这样的伎俩但是您必须使用单选按钮上的事件绑定来检查单击两个单选按钮的情况ame行。 jsfiddle.net/g8gvof06

来源

2016-07-26 06:34:57

试试这个，

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<div id="main1"> 
    <div id="group1"> 
     <input type="radio" name="say_yes" class="group1" value="test1"> 
     <input type="radio" name="say_no" class="group1" value="test2"> Group 1 
    </div> 
    <div id="group2"> 
     <input type="radio" name="say_yes" class="group2" value="test1"> 
     <input type="radio" name="say_no" class="group2" value="test2"> Group 2 
    </div> 
    <div id="group3"> 
     <input type="radio" name="say_yes" class="group3" value="test1"> 
     <input type="radio" name="say_no" class="group3" value="test2"> Group 3 
    </div> 
    <div id="group4"> 
     <input type="radio" name="say_yes" class="group4" value="test1"> 
     <input type="radio" name="say_no" class="group4" value="test2"> Group 4 
    </div> 
</div>

而一些jQuery的，

$('input').click(function(){ 
    $(this).parent().find('input').not(this).removeAttr('checked'); 
});

演示http://jsbin.com/runocizugo/edit?html,js,output

谢谢！

来源

2016-07-26 06:41:10

它不能正常工作 – mxlse

好吧，我的坏。看看这个，http://jsbin.com/runocizugo/edit?html,js输出 –

现在工作:-) – mxlse

您必须定义具有相同名称的YES按钮和具有相同名称的NO按钮以实现垂直分组。对于每一行我都会集成一些Javascript来取消选择选项的对应部分。

$("input:radio").change(function(){ 
    if ($(this).is(':checked')) { 
    var name = $(this).attr("name"); 
    $(this).parent().children().each(function(i) { 
     if(this.getAttribute("name") != name){ 
     this.checked = false; 
     } 
    }); 
    } 
});

https://jsfiddle.net/yeqsqxcq/

来源

2016-07-26 06:55:09 mxlse

单选按钮选择只有一个“YES”和一个“否”的一组

回答

相关问题