Jquery複選框隱藏或顯示元素

我想要使用jquery在選中時始終隱藏元素，並在未選中時顯示該元素。之後做一些研究，我發現了「是」的屬性，所以我創建了一個簡單的HTML文件：Jquery複選框隱藏或顯示元素

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 
if($("#s").is(':checked')) 
    $("#test").hide(); // checked 
else 
    $("#test").show(); 
}); 
</script> 
</head> 
<body> 

<h2>This is a heading</h2> 

<p id="test">This is a paragraph.</p> 
<p id="test">This is another paragraph.</p> 

<input type="checkbox" id="s">Click me</input> 

</body> 
</html>

現在，出於某種原因，該jQuery是不起作用。任何幫助，將不勝感激請。我也試過：

if(document.getElementById('isAgeSelected').checked) { 
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide(); 
}

而且這也行不通。

來源

2017-04-19 Muhammad

請注意，您要關閉，你從來沒有開了''

可能重複[設置「選中」的複選框與jQuery？]（http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery） –

你只選中複選框後，一旦DOM是準備好，而不是你應該在其變化事件上做它

$("#s").change(function(){ 
    if($(this).is(':checked')) 
    $("#test").hide(); // checked 
    else 
    $("#test").show(); 
});

來源

2017-04-19 14:41:35

這在javascript中很簡單。請嘗試以下操作：

var cb = document.getElementById('isAgeSelected'); 
var txtAge = document.getElementById('txtAge'); 

$(document).ready(function(){ 
    cb.change= function(){ 
     if(cb.checked) { 
      txtAge.style.display ='block'; 
     } else { 
      txtAge.style.display ='none'; 
     } 
    }; 
});

在jQuery中，你可以做到以下幾點：

$(document).ready(function(){ 
    $('#s').on('change', function(){ 
     if($(this).is(":checked")){ 
     $('#txtAge').show(); 
     } 
     else{ 
     $('#txtAge').hide(); 
     } 
    }); 
});

來源

2017-04-19 14:36:05

爲此，您可以使用以下jQuery的onchange事件和.checked功能

$(document).ready(function(){ 
    $('#s').change(function(){ 
     if(this.checked) 
       $("#test").hide(); // checked 
     else 
      $("#test").show(); 
     }); 
});

工作網址:: https://jsfiddle.net/qn0ne1uz/

來源

2017-04-19 14:38:22

是的，這個工程，但可以如果沒有：$（'＃s'），你可以解釋爲什麼它不起作用。change（function（）{？ Thanks – Muhammad

@Muhammad因爲你寫的代碼只有在文檔準備好時才起作用，那麼如果複選框被選中/取消選中沒有觸發器會被觸發，所以你必須使用'onchange'。 –

好問題！

現在你幾乎在那裏。

$(document).ready(function(){ // <= !! you only evaluete the chackbox once (on document ready) 
if($("#s").is(':checked')) 
    $("#test").hide(); // checked 
else 
    $("#test").show(); 
});

你想要做什麼是顯示器複選框的全部時間，像這樣：

$('#s').bind('change', function() { 
    if ($("#s").is(':checked')) 
    $("#test").hide(); // checked 
    else 
    $("#test").show(); 
});

例如在jsfiddle

來源

2017-04-19 14:40:30 VikingCode

我猜你想在複選框更改時使用jQuery - 此時你只是在文檔加載時更改隱藏/顯示。

此外，ids需要是唯一的，否則jQuery只會在使用id選擇符時纔會獲得具有該id的第一項。將測試ID更改爲一個類。

如果您希望單擊我來更改複選框的狀態，請將其轉換爲標籤（將其視爲按鈕）並將其作爲目標輸入（使用for="input-id或將標籤包裝在輸入和文本週圍）

嘗試以下操作：

// this is to go in your document ready 
 

 
$('#s').on('change', function() { // bind to the change event of the chackbox 
 
    // inside any change event, this is the js object of the thing that changed (ie the checkbox) 
 
    if (this.checked) { 
 
    $('.test').hide(); 
 
    } else { 
 
    $('.test').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>This is a heading</h2> 
 
<!-- ids need to be unique so change this to a class or your jquery won't work --> 
 
<p class="test">This is a paragraph.</p> 
 
<p class="test">This is another paragraph.</p> 
 

 
<input type="checkbox" id="s"><label for="s">Click me</label>

來源

2017-04-19 14:42:07 Pete

Jquery複選框隱藏或顯示元素

回答

相關問題