जटिल Form Inputs
In this page:
$("input[name=groupName]:checked").val(); // radio: one value
$("input[name=groupName]:checked").each(function() {
// this.value is one checked value
});
$("#selectId").val(); // select menuCheckbox Groups
एक ही name share करने वाला checkboxes का group user को options की किसी भी combination को tick करने देता है, और jQuery एक साथ सभी checked वालों को एक single selector इस्तेमाल करके collect कर सकता है।
उदाहरण: Checkbox Groups
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="fruit" value="apple" checked>
<input type="checkbox" name="fruit" value="banana" checked>
<input type="checkbox" name="fruit" value="cherry">
<script>
const checked = $("input[name=fruit]:checked").map(function() { return this.value; }).get();
console.log(checked);
</script>
</body>
</html>Radio Buttons
एक ही name share करने वाले Radio buttons group में से सिर्फ एक choice की अनुमति देते हैं, क्योंकि एक को select करने से बाकी automatically deselect हो जाते हैं। jQuery इस्तेमाल की गई value को पढ़ सकता है।
उदाहरण: Radio Buttons
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="radio" name="size" value="S">
<input type="radio" name="size" value="M" checked>
<script>
console.log($("input[name=size]:checked").val());
</script>
</body>
</html>Select Menus
Select menus default रूप से एक dropdown list में से एक choice देते हैं, और jQuery का val() method यह पढ़ता या set करता है कि इस समय कौन सा option selected है। इसे पढ़ना बताता है कि user ने अभी क्या चुना है।
उदाहरण: Select Menus
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select id="color"><option>Red</option><option selected>Blue</option></select>
<script>
console.log($("#color").val());
</script>
</body>
</html>Multiple Selects
multiple attribute वाले एक select में एक साथ कई selected values हो सकती हैं, और उस पर val() call करना selected सभी options की values का एक array return करता है।
उदाहरण: Multiple Selects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select id="colors" multiple><option selected>Red</option><option selected>Blue</option><option>Green</option></select>
<script>
console.log($("#colors").val());
</script>
</body>
</html>Practical Inputs
अलग-अलग form controls -- checkboxes, radios, और selects -- को एक ही form में साथ handle किया जा सकता है, हर एक को उसके लिए suited technique से पढ़ते हुए कि यूज़र कितनी values choose कर सकता है।
उदाहरण: Practical Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="opt" value="a" checked>
<select id="color"><option selected>Blue</option></select>
<script>
console.log($("input[name=opt]:checked").val(), $("#color").val());
</script>
</body>
</html>- Checkboxes के एक group पर
.val()call करना और सारी checked values की उम्मीद रखना, जबकि यह सिर्फ पहले element को पढ़ता है; इसके बजाय$("input[name=fruit]:checked").map(...)इस्तेमाल करें। - किसी radio group को
$("input[name=size]").val()से पढ़ना बजाय$("input[name=size]:checked").val()के, जो selected radio के बजाय पहले radio की value return करता है। <select multiple>पर.val()से एक string की उम्मीद करना, जबकि यह एक array return करता है (या पुराने jQuery में कुछ भी selected न होने परnull)।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: