單選按鈕選擇只有一個「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」和一個「否」的一組

回答

相關問題