關於收音機選擇，顯示不同的複選框選擇

我正在尋找一個Javascript或jQuery解決方案，可以工作。關於收音機選擇，顯示不同的複選框選擇

無論如何，當用戶選擇單選按鈕的選項之一時，我想要顯示一組不同的複選框。所以，如果用戶選擇按名稱，名稱複選框將顯示出來。然後，當用戶選擇按標題時，名稱複選框將消失，標題複選框將顯示出來。

當一個頁面加載和選項沒有選擇，沒有複選框應該出現

下面是HTML的樣子：

<table> 
    <tr> 
     <td><input type="radio" name="selectType" value="byName" />By Name</td> 
     <td><input type="radio" name="selectType" value="byTitle" />By Title</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" name="selectName1" />Name 1</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" name="selectName1" />Name 2</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" name="selectTitle1" />Title 1</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" name="selectTitle2" />Title 2</td> 
    </tr> 
</table>

會是什麼這個代碼是什麼樣子？

來源

2013-02-26 user906153

我會使用數據屬性引用複選框組。這種方式可以使你的代碼真正靈活和不引人注目：

$('.type-check').change(function() { 
    $('.type-group').hide().filter('.type-group-' + $(this).data('type')).show(); 
});

HTML樣本：

<tr> 
    <td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td> 
    <td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td> 
</tr>

http://jsfiddle.net/D8s9G/

來源

2013-02-26 19:44:37 dfsq

非常好。只是一個班輪答案。 :) – 2013-02-27 01:22:20

首先給你的複選框類..

<input type="checkbox" name="selectName1" class="name"/>Name 1 
<input type="checkbox" name="selectName2" class="name"/>Name 2

爲標題做同樣的，給他們的「標題」和爲貴無線電太一類的名稱..

<input type="radio" name="selectType" value="byName" class="radioName" />

即可;

$(document).ready(function() { 
    $('.radioName').click(function() { 
     $('.name').show(); 
     $('.title').hide(); 
    }); 

    //same logic for titles.. 
});

來源

2013-02-26 19:37:14

這裏是一個可行的解決方案 - http://jsfiddle.net/FloydPink/fkvSg/

的jQuery：

$('.name').closest('tr').toggle(false); 
$('.title').closest('tr').toggle(false); 

$('input[name=selectType]').change(function() { 
    var byNameSelected = $(this).val() == 'byName'; 
    $('.name').closest('tr').toggle(byNameSelected); 
    $('.title').closest('tr').toggle(!byNameSelected); 
});

HTML：

<table> 
    <tr> 
     <td> 
      <input type="radio" name="selectType" value="byName" />By Name</td> 
     <td> 
      <input type="radio" name="selectType" value="byTitle" />By Title</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="name" name="selectName1" />Name 1</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="name" name="selectName2" />Name 2</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="title" name="selectTitle1" />Title 1</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="title" name="selectTitle2" />Title 2</td> 
    </tr> 
</table>

我已經添加CSS類到所有四個通道eckboxes，這樣可以對「名稱」和「標題」複選框進行分組。

來源

2013-02-26 19:42:33

您可以選擇用自己的名字輸入和顯示或隱藏相關的輸入：

$('input[value*="byName"]').click(function() { 

    $('input[name*="selectName1"]').show(); 
    $('input[name*="selectTitle1"]').hide(); 
} 

    $('input[value*="byTitle"]').click(function() { 

    $('input[name*="selectName1"]').hide(); 
    $('input[name*="selectTitle1"]').show(); 
}

來源

2013-02-26 19:42:51 Alex

關於收音機選擇，顯示不同的複選框選擇

回答

相關問題