使用複選框控制單選按鈕

我使用隱藏表單元素的CMS後面，因爲一些系統怪癖，我必須設置一個複選框來控制單選按鈕，所以如果複選框勾選「是「如果沒有選擇」否「，則選擇單選按鈕。我還希望單選按鈕默認選中「no」選項，但我無法控制單選按鈕的代碼行。使用複選框控制單選按鈕

我發現了一些Javascript，它只是做了一小部分，但我想將它整合到顯示和隱藏內容的jQuery中，當勾選框時。

這是我到目前爲止有：

$('#checkbox1').change(function() { 
    $('#content1').toggle("slow"); 
});

的JavaScript我是這樣的：

function ticked(){ 
    var ischecked = document.getElementById("checkbox").checked; 
    var collection = document.getElementById("hideradio").getElementsByTagName('INPUT'); 
    if(ischecked){collection[0].checked = true;}else{collection[0].checked = false;} 
}

能否請你幫忙寫個版本的JavaScript，但我的jQuery的整合？

謝謝，

來源

2012-09-21 Lee

你可以試試這個，我想你的HTML作爲這樣。

<input type="checkbox" id="checkbox1" /> Check Box 

<div id="content1" > 
    Some Content <br /> 
    Some Content <br /> 
    Some Content <br /> 
    Some Content 
</div> 

<div id="hideradio"> 
    <input type="radio" name="rgroup" value="yes" /> Yes 
    <input type="radio" name="rgroup" value="no" /> No 
</div>

JQuery的

$(function(){ 
    $('#hideradio input[type=radio][value=no]').attr('checked',true); 
    $('#content1').hide(); 
}); 

$('#checkbox1').on('change', function() { 
    $('#content1').toggle("slow"); 
    var self = this; 
    if(self.checked) 
     $('#hideradio input[type=radio][value=yes]').attr('checked',true); 
    else 
     $('#hideradio input[type=radio][value=no]').attr('checked',true); 
});

的快速DEMO

來源

2012-09-21 05:44:27

這太棒了！有沒有辦法通過jQuery自動檢查「否」？我使用的系統僞裝自己的通用標籤背後的標籤，所以我沒有選擇默認選中checked = check的選項。 – Lee

@Lee，檢查更新後的答案，準備好後隱藏內容並進行檢查=檢查沒有收音機。 –

@Lee Demo也會更新 –

如果我不明白，然後讓我知道。

我不知道你的HTML代碼，所以我提供一個

<form> 
    <input type="checkbox" name="test_ck" id="test_ck" /> 
    <br/> 
    <input type="radio" name="test_radio" id="test_radio" /> 
</form> 

<div id="content"> A content !!! </div>

和JavaScript的jQuery

$(function(){ 
    $("#test_ck").on("change", function(){ 
      $("#test_radio").prop("checked", $(this).is(":checked"));    
     $("#content").toggle("slow"); 
    }); 
});

示例 - >jsfiddle

修訂的jsfiddle

http://jsfiddle.net/6wQxw/2/

來源

2012-09-21 05:32:55

太棒了！我只需要它自動進入第二個單選按鈕「否」，如果複選框沒有打勾並且頁面自動加載。這可能嗎？ – Lee

@李：看到更新的答案！讓我知道這是否有助於你。 –

試試這個代碼

$(function(){ 
    $('#checkbox1').on('click' , function() { 
     var isChecked = $(this).is(':checked'); 
     if(isChecked){ 
      $('#radio1').attr('checked' , true); 
      $('#content1').toggle("slow"); 
     } 
     else{ 
      $('#radio1').attr('checked' , false); 
     } 
    }); 
});

檢查[FIDDLE]

來源

2012-09-21 05:35:47

不幸的是沒有工作 - 我得到了這個錯誤未捕獲SyntaxError：意外的令牌非法 – Lee

已更新的代碼..還檢查小提琴的工作演示 –

jsfiddle

$(document).on('change', '#checkbox', function() { toggle(this); }); 

var toggle = function(obj) { 
    var checked = $(obj || '#checkbox').is(':checked'); 
    $(':radio[value=no]').prop('checked', !checked); 
    $(':radio[value=yes]').prop('checked', checked); 
    $('#content').toggle(checked); 
} 

toggle();

來源

2012-09-21 06:54:04 Simon

這是一個純JavaScript的解決方案，無需使用jQuery：

<body> 
<label for="a">Male</label> 
<input type="radio" id="a"> 
<br/> 
<label for="b">Female</label> 
<input type="radio" id="b"> 
<script type="text/javascript"> 
    var nodes = document.querySelectorAll("input[type=radio]");// get elements 
    var arr = Array.prototype.slice.call(nodes); // convert nodes to array for use in forEach 
    arr.forEach(function(obj){ 
     obj.addEventListener("change",function(e){ 
      arr.forEach(function(obj){ 
       obj.checked = false;//make other radio false 
      }); 
      this.checked = true;// make this radio ture 
     }); 
    }); 
</script> 
</body>

來源

2014-09-13 18:13:35 Obaid

請不要複製你的答案。您可以回答每個問題，專門針對不同的位，或者將問題標記爲重複，並且只回答一次。 – Flexo

使用複選框控制單選按鈕

回答

相關問題